 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta TextFool. In this video, I'm going to discuss about HTML templates, data binding, and we will see like how we can fetch data using gathers. So in my previous video, I demonstrated you how we can fetch data using property. So gathers are a little bit different with property. So gathers are also properties, but they are implemented differently. So in this demonstration, you will get to know like how we can use gathers in LWC. So in a previous demonstration, I just use this HTML file, which I'm going to modify. So here I'm going to implement a dev class equals to slds-m-proud-medium. And I'm going to put this code inside dev. So it is lightning input. So I'm just toggling this explorer so that we can see the full code. So I'm just shifting it above. So in lightning web component, if you begin any element, so you just need to end it separately. So here lightning input, then I'm just providing name as well. So name will be fname, label will be first name. Value I'm not providing this time because initially it will be blank on the UI. And on change, if you change something on this lightning input, so handle change function will be called and executed. So I'm just copying and pasting it. So I have one more lightning input. So its name will be L name, label will be last name and same handle change function will be called if you change something. Then after that, I'm just defining one more statement that is p tag, then class equals to slds-m-top-medium. So these are CSS classes which are predefined with Salesforce lightning design system. So you can search on Google like Salesforce lightning design system and there you will find some predefined classes that you can use with your elements. So here p element is using this class and inside this I'm going to write uppercase full name and in curly basis I'm going to write uppercase full name. So this is a property that I'm going to define in JavaScript file. So this way this HTML file is implemented. So here we have two lightning inputs and both the lightning inputs will be calling this handle change function that I'm going to define in JavaScript file. And this p element will be displaying like uppercase full name. So both first name and last name will be concatenated and they will be displayed on the UI. So I'm just saving this file. Now I'm jumping to JavaScript files in JavaScript. First of all, I'm going to declare two properties. So I'm creating first name, then last name. So these are two properties that I created here. Then I need to define handle change. So it is already available here that I used in previous demonstration. So here we are receiving an input parameter as event. So here what I need to write. So first of all, I'm just removing this statement. So here I'm going to write a statement like const field equals to event dot target dot name. So now we need to understand what does it mean. So whenever you change something in this lightning input. So this handle change function will be called and all the information related to that lightning event, sorry, lightning input will be available in this event parameter. Now through this event parameter, we are writing event dot target dot name. So name means this F name or L name. So because we have two lightning input and both are calling same function. So we need to distinguish in which lightning input we just changed the value. So through this name, we will identify that. So after this, I'm going to write F field triple equals to. So here I wrote F name poll in small letters. So I need to write in small here. And inside curly basis, I can write some statement, right? And if you don't want to create this field as a variable here. So what you can do, you can just use this directly here in place of field inside if condition. So both way it will work. Now we created two properties, first name and last name. So in first name, last name, I'm going to set the value. And I already told you in most of the demonstrations, like if you create any property in JavaScript. And if you use that property in JavaScript itself, so you need to write this dot and then first name then equals to even dot target dot value. So we already identified like if something is changed in any of the lightning input and if its name is equals to F name. So it means we changed in the first lighting input because it is having name as F name. So that value will go to first name. Otherwise we can write else if then field triple equals to L name. So if something is changed in L name, so what we can do this dot last name equals to even dot target dot value. So this way I gave you one more example, like if you have two same elements available on HTML and if you want to distinguish between them. So you can do this like this. Now this function is implemented completely. So this handle change function is like deciding which in which lightning input you provided some value and basis on that it is filling first name and last name. Now our responsibility is to concatenate this first name and last name. So for that I'm going to use getter property. So basically getter property gives you a block where you can write some code and basis on the result of that code. You can just use a return keyword and that value will go to HTML file automatically. So here I'm going to use a better named as uppercase full name. So I'm copying it from here and I'm pasting it here and it is like function like property. So here you can write some code that will execute and it will return value and it will automatically go to the HTML. So in previous demonstration I just focused on the property itself. In this demonstration we are creating property like first name, last name, these are properties and this is actually getter. So I can write a comment as well. So getter and inside this getter I'm going to write return. Now we need to write apostrophe. Then dollar. Then inside curly basis we need to write this dot first name. Then again dollar inside curly basis this dot last name. Then the apostrophe is closed and then dot to uppercase. So this is a method. So what will happen first name and last name will be concatenated and they will be converted into uppercase and it will be displayed on the UI. So this is an expression that we created here and through return it will go to HTML. So in HTML I already use this getter property here. So if you want to do some calculation and basis on that calculation if you want to return the value to your HTML file automatically so you can use getter property. In later demonstrations I will be showing you two things one will be called as getter and one will be called as setter. So getter setter we will discuss together but in this demonstration I'm just showing you the use of getter only. So this way this JavaScript file is also implemented and we already implemented HTML file and data binding dot XML is already implemented because I just modified the lightning web component that I used in previous demonstration. Now I just need to deploy it to Arc so I'm just deploying it so that I can just test it how it will look like on the UI. So I'm just doing a refresh. So this component is already placed here on the homepage. And if you need to know like how we can do that so just click up here and click on edit page. And then on left bottom you will find the component so you can just drag and drop. So here we have first name lightning input we have last name lightning input and uppercase full name is blank right now. So in first name I'm writing Sun Jet so you can see I wrote s capital and rest in small letter right so you can see everything is written here in capital because we are using. This two uppercase function here. Right now if I write my last name here so you can see it is displayed here and it is having a space as well because why writing the statement I just provided our space here. Okay, so that is why it is showing a space as well. So now whenever you change something in first name or last name so your this full name will be shown in same way, and it will be uppercase automatically. If I change name again so you can see it is changing here as well. So this way I demonstrated you a few things in this demonstration like how we can identify which lightning input element changed its value with help with the help of this if else. The second thing like how to use getters in JavaScript. So this way I am we can define getter right this is getter property and here in HTML we have used this getter property. Right. So, I hope with the with this demonstration. We are able to understand the difference between property and getters like properties are simple variables where we can assign some value and getters are also property but these getters are having a block where we can write some logical code as well. And basis on that logic, your result will be returned and you can see like it is rendering on the UI. In this getter property is also reactive whenever we are changing something in this lighting input so changes are being rendered on the UI automatically. Right, so this is all about HTML templates data binding, and we just learned how to fetch data using getters in this demonstration.