 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 use getter and setter together in a lightning web component. So in this demonstration, I will be implementing two lightning web components. So one will be the child component and one will be the parent component. Child component I will be calling in the parent so that through parent I can set the properties that we will be creating in the child component. Right, so let's get started so that you can understand the use of getter setter in lightning web components. So I'm just going to create new lightning web component. So lightning web component name will be child I'm pressing enter again enter so here you can see child lightning web component is created. So I'm jumping to its HTML file. And here I'm writing a property name that is uppercase item name. So this is a property that I will be creating in the JavaScript file and through JavaScript I will be setting its value and it will be rendering on the UI through this HTML. Now I'm jumping to JavaScript. So here inside this curly basis. I'm going to create that property. I'm just copying this and I'm going to paste it here and I'm just going to fill it with default value. So here I'm writing default value right or maybe you can leave it blank as well. So if you want to initialize it with some some value so you can otherwise you can leave it blank as well. Now I'm going to use at the rate API and after that I'm creating a getter. So getter name is item name and inside curly base I will be writing the code and after that I'm writing the setter. So set item name and it will be receiving a receiving a value right. So if I talk about getter so what getter will be doing. So getter will be returning getter will be returning the value of this upper case item name. So I'm writing return this dot uppercase item name. So in my previous videos I already explained to you why we use this. So whenever you create any property in JavaScript and you want to use it in the same JavaScript file again. So every time you need to use this dot and then property name. So this property will be returned and it will be rendered on the UI with the help of this statement right. Now what is the use of setter. So this setter will be using or will be receiving the value in this value variable. So what we need to do we need to assign that value variables value into this property. So again this dot uppercase item name equals to value dot to uppercase right. So whatever value we will be having in this value variable so it will be converted into uppercase. So always remember like when you will be passing the value so it will be a string so that it will be converted into uppercase easily. So this uppercase converted value will be assigned into this uppercase item name property through this setter and getter will be returning the value of this property and it will be rendering on the UI with the help of this HTML. So this way I created this child component. So now I'm saving HTML file now I'm saving JavaScript file. So now I need to create one more component. So I'm right clicking and creating new lightning web component. So I'm naming it as parent. So one more component is created named as parent. So in this component I'm going to use the child component. So I'm opening the HTML of this parent. So here under these template tags I will be calling the child component. So first of all I'm going to use lightning card. So inside this lightning card I'm going to use a div. So div will be having class as SLDS-P-TOP underscore large. Now inside this div I'm going to use that child component. So if you want to call a component into another component. So you need to write this notation C- and then that component name. Now here also I'm applying a CSS class SLDS-text-heading underscore medium. Now after this I'm going to write the property setter property. So I need to write item-name then equals to, I'm going to set my first name that is Sanjay and I'm closing it. So you can see this child component is closed here as well. So in lightning web component if you begin any tags so you need to close it as well. Okay. So if you want to switch or shift it to the new line so you can. So this way this div is created. Now I'm going to copy it. I'm going to paste it one more time. So again you can see here this child component is called and this time in this item name I'm going to pass my last name that is Gupta. So this item name is a set of property. So I take you here so you can see it is available here as a setter. So it will be receiving that value like Sanjay will be received into this value and it will be converted into uppercase and it will be assigned into this property and through getter it will be returned to the HTML file. So this way setter is receiving value from other component and getter is returning that value to the HTML file of the same component. And here you can see both are under both are defined under at the rate API decorator. So this decorator basically converts any property as public. Why I use this at the rate API because these property like this setter property I'm using into another component. So it means I'm using a property outside child component. So that is why I declared it as public using at the rate API decorator. Right? So this way my parent component is created. Now what will happen? I will be placing this parent component on the UI and through this parent component child component will be placed twice because in this HTML I have called this child component twice and child component will be receiving this value in the item name through setter and getter will be rendering that value on the UI with the help of this HTML. So by placing parent component on the UI child component will be rendered automatically and child component will be rendered twice because here you can see we have called it twice but both the components like both the child component will be displaying different values because I have passed different value to item name property. Right? So now we need to implement meta.js-xml. So here I am converting it to true. Then I need to set the targets. So target I am setting as lightning home page. Right? So this way child component is created. Parent component is created. Now one by one we will be deploying these components to the org. So you need to deploy both. First you can deploy child and then you can deploy parent. So I am just right clicking on the child component and selecting deploy source to org. So this has been deployed from source to org. Once it is successfully deployed then we can deploy the parent component. So I am right clicking on the parent component and I am selecting deploy a source to org. So it is also deployed. Now I am jumping to the org and I am going to open the sales application so that I can open the home page and I can place the parent component on the home page. So I am going to edit the page. So just closing the pop-ups again clicking here. Okay, I just need to refresh the page because edit option is not available. Now it is available. So I am just clicking on edit page so that I can place my parent component on the page and we can see the results. So if I scroll to bottom so you can see parent component is visible. Child is not visible because for child component we didn't create matter.exe file. So I am just dragging and dropping the parent component. And here you can see it is showing Sanjay and Gupta in uppercase letter. So I am just saving it. Moving back. So two outputs are available here because child component is rendering twice on the parent component. So this way I hope you understood how we can pass value from parent component to child component with the help of like getter and setter. So this way I configured this getter and setter. So setter will be receiving value from outside the component and getter will be sending or returning that value to the HTML file of the same component. And if you are setting the value from outside the component so you need to use this at the rate API decorator as well so that these getter and setter will be becoming public property. And you need to use it once here before the getter you don't need to repeat it for setter. So this way I hope you understood the use of getter and setter together in a lightning web component. So I hope you understood the concept very well. And if you want to learn about getter so I hope you was the previous video that is dedicatedly I created for getter only. So in this video, like after watching that video you will be able to understand this and just just follow all the videos so that you can step by step learn the concepts well.