 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate how you can perform message passing between components. So, first I will be demonstrating the concept with the help of private property. Then I will be converting that private property into public property so that you can understand how through one Lightning Web component we can pass value to another Lightning Web component. So, jumping to visual studio code. So, here, like for previous demonstration, I created two components, child and parent. So, I will be reusing them. So, I am on child.html. So, here I'm removing this code and I'm writing hello then comma. So, I'm just clicking on this Explorer so that it will be available in the whole page. So, here I'm writing hello and then a property first name and then exclamation sign. So, hello is a plain text that will display as is and first name is a property that will be changing its value as per the value assigned in the JavaScript file. So, this is my child.html. Now, I'm jumping to child.js. So, here I'm removing this code and here I'm creating the first name property and here I'm assigning first name as Sanjay. So, this is a property which I declared in JavaScript and this property is having value as Sanjay. And if I save this code so that property will be rendered on this child. HTML file. Right now I'm going to implement the parent component. So, in the parent component here you can see I just implemented a lightning card. So, this I also demonstrated in the previous video. So, here we have Dev which is having a class then we are calling the child component. So, from here I'm just removing this parameter and from here also I'm removing this parameter. So, why I removed that parameter because in child component the js is having this property and this property is not annotated with adverite API. So, this property will be treated as private property. Right, so it is a private property. Right, so if a component is having a private property then you cannot expose that property to other component. So, it means parent component won't be able to access that property to assign any value. Right, but the child component we can use in the parent component and whatever is available in child component that will be rendered with the help of this parent component. So, I called child component twice. Right, so two outputs will be available on the UI and that output will be based on this first name property. It is having Sanjay. So, Sanjay will be rendered twice. So, output will be hello Sanjay and in next line it will be displayed again like hello Sanjay because here we are calling the child component twice. So, after these changes I just need to redeploy the components. So, first I am right clicking on the child component. So, this child component will be deployed from source to R and after that I need to deploy parent component. So, I right click and I am selecting deploy source to R. So, both the components are deployed. So, right now I am just demonstrating you the use of private property like if you have created private property. So, you cannot expose that to other component. So, I am jumping here. So, this output is available here. So, this I demonstrated in the previous video. Now, I am just refreshing the page and you will see the different result. So, you can see hello Sanjay is available twice because the parent component is calling child component twice. So, this was about private property. Now, if you want to pass masses from parent component to the child component. In the previous video I showed you that with the help of getter and setter. Now, if you don't want to implement getter setter and you just want to use a simple property that we declared here as first name. So, what you can do, you can just annotate it with at the rate API. Right. And if you annotate it with at the rate API. So, at top you can see API functionalities all automatically imported. Right. Now, first name is public because we are using at the rate API decorator with it. So, now what we can do in this parent component here, I can just pass the value. So, I am just going to use first iPhone name and equals two. So, here I am going to pass the class. Okay. So, remember like if you're using first name so everything will be in small case. Here we are using camel case. camel case means first word is small and second word onwards first letter is capital. But when you are using this property here. So, it will be using kebab case in kebab case everything will be in small letter. And if you have more than one word so they will be separated with hyphen. So, I'm just going to copy it and pasting it. And here I am writing first name as Arush. And here I just used these component twice. So, if you want to have it for one more time so you can just copy and paste. So, here I can write one more. I can pass one more first name like I'm passing a third. So, here like child component I called three times in the parent component. So, three output will be rendered on the UI. Right. So, this way I hope you understood if you have created a property. So, I'm not talking about getter and setter they are different. This is just a property and it is declared as public using at the rate API. And if I call this component in the parent component or in any other component. So, at the time of call I can just pass the value to that property because it is declared as at the rate API. So, that became the public property and public property can be exposed to other components as well. Right. So, with this like you got to know with at the rate API like property can receive value from like components. Like we received record ID earlier. Now, we are just receiving value from other components. So, from record base you can receive record ID into public properties and from any other component you can just receive values. Like we are passing value from parent component to child component. So, now first of all I'm going to redeploy child component. So, I'm selecting deploy source to our because I modified the JavaScript of this component. And now I'm going to redeploy parent component because it is also modified. So, it has been deployed from source to all. And this time like these default this default value won't be displayed it will be overwritten because parent component is passing values to ease child instance that we are using here. So, if I jump here and if I refresh the page, so you will see three outputs here with different first names. So, you can see hello because hello Irish and hello, so this way three different names are displayed here on the components. Right. So, this way I hope you understood how we can pass messages between components. So, one thing you need to remember if you want to pass message from one component to another. So, you need to make that property public with the help of at the rate API, then only you will be able to expose that property to other component and the other component can pass value to the previous one. So, here we created child component where the property was public declared and when we called child component in the parent component. So, parent component was able to pass value to that public property. And if you use more than one instance of that child component, so you can pass different different values to that public property. So, this is all about how we can pass messages between components in lightning web component.