 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss and demonstrate about HTML templates data binding. So in this video, I will be focusing on the binding with the help of property. So I will be creating a property in JavaScript file of LWC and that property I will be using on the HTML file. So if we will be providing some new value to that property with the help of HTML code. So I will tell you how you can fetch that data with the help of property in JavaScript and in JavaScript like properties are reactive. So if you change any value in that property, so it automatically renders on the UI. So let's jump to Visual Studio Code and here like for all the videos I'm using Sanjay Gupta Tech School project that I created in the beginning video where I just demonstrated you like how we can set up Visual Studio Code. So here I till now I have created five lightning web components. So now I'm going to create one more and naming it as data binding. So this data binding component is created. Now here I need to implement the code. So for demonstration purpose on left hand side, you can see this is the Explorer. So if you click on this button, so this Explorer will be hidden. So this is a toggle button. So if you want to utilize the full editor, so you can just toggle and you can just hide. And whenever you want to open this so that you can open another files, you can just toggle. So here I'm going to write the code. So JavaScript file is open. So first of all, what I'm going to do here I'm going to create a property named as greeting. And here I'm just assigning hello in single quotes. So this greeting is a property and this is a private property because we have not used at the right API decorator. So this property we can use in this lightning web component and its value is hello. So initially I will be using this property in the HTML file. So if I click here and select data binding dot HTML. So here we are on HTML file. So inside HTML, I'm just using a P tag P is used for paragraph. And inside this P I'm just writing hello. So actually I'm going to change JavaScript value. So let's say here I'm putting my name Sanjay. And here I'm writing hello then comma. And if you want to use your property in HTML so as in previous videos we saw like we need to use that property name inside single quotes. Right. And after this I'm just putting a exclamation sign. Right. So this way, I hope this code is understandable by you. So now I'm just going to save the JavaScript file. I'm going to save the HTML file. So the simple piece of code I'm going to demo you like I'm placing I'm going to place this lightning web component of the UI and then you will see whatever value is available in JavaScript. This greeting property, it will be rendered on the UI. But before that I need to modify this dot XML file. So is exposed is true. And then we need to set the targets. Now here we need to set the target as lightning homepage. So I will be placing this component on lightning homepage. So that is why I'm using this target and saving this code. Now I'm just right clicking on this data binding folder of LWC. And I'm selecting deploy a source to arm. So this component is being deployed from visual studio port to our Salesforce or so I'm jumping to Salesforce or so here you can see I am on Sanjay Gupta Tech School app. And here I have home page. So now I'm going to modify this. So I just clicked on edit page. And I will be placing that lightning web component. So here you can see data binding component is available. I placed it. I'm just saving it moving back and on home page you will see the result. So here you can see it is showing hello Sanjay right. So this way output is available on the UI. Now, if I go to visual studio code. So now I'm going to modify this code a little bit so that we can receive some input from UI as well. So for that purpose, I'm going to use lightning hyphen input. Right. So this is first video where I'm going to show you how you can receive input from HTML file. And that input we will be sending to JavaScript. And through JavaScript, like we will be updating this greeting property. So here I'm putting label equals to name. So I'm just expanding this. So label equals to name and value equals to now here. I'm putting greeting. Right. So what will happen, whatever value I will be typing in this lightning input. So that value will automatically goes to this greeting property. Right. And on change. So this is an event on change. So I'm going to call handle change function. Right. So this way I implemented this lightning input with its label will be name. Whatever value we will be typing it will be available in this greeting. And if you change something in this lightning input. So this handle change function will be called automatically. Because we have defined it with on change. Right. So whenever you will be changing the text. So this handle change function will be executed. Now we need to define this handle change function in this JavaScript. So after this property, I'm just going to define handle change. And it will be receiving a parameter as even. So whenever you use any base component, like where you apply some events, like on change, if we have used buttons. So in case of button we use on click. So in that case, you can just bind a function and in that function, like that event will be receiving the information related to that element that you're using. So here I'm writing this dot greeting equals to even.target.value. Right. So what is happening here, whenever you are changing, you will be changing some value in this lightning input. So that value will be received through this value attribute and on change will be executing the function, which is defined here. So the information of that lighting input will be available in this event through that event.target.value. So we are fetching the value and we are signing that into this greeting property. Now this greeting property is declared here. So if you declare any property in JavaScript and that property you use in that JavaScript file itself. So you always need to use this keyword, right? So this is part of best practice that you need to use. Otherwise your code won't be working. So I just saved both the files. Now I'm just moving here and I'm going to refresh the page. Okay. I just forgot to deploy. So after saving, I need to deploy a source to all because changes are still available with Visual Studio Code. So they are not in the org. So after deployment, if I do a refresh now, so you will see the changes on the UI. So here you can see it is showing hello Sanjay and then label of this lightning input is named. And here you can see by default it is showing value as Sanjay because here we just binded this HTML file with value equals to greeting. So whatever value is available in this greeting property, it is being displayed on this lightning input as well. Now whenever I change something in this lightning input, so you will see like hello and then Sanjay will change automatically. So if I remove this, so you can see at top it is changing. And if I write because so it is reacting automatically. So this way, like whenever we are changing some value in this lightning input, so a property that is declared here in JavaScript, it is changing automatically. So this way I hope you understood like how we can fetch values from user through HTML. And with the help of this value, we are storing that value into greeting property. And through this handle change, like we are calling this function and through this function, whatever value is available in this value attribute, we are assigning that back to this greeting property. And this greeting property is reactive. If it is changing its value in JavaScript, so automatically on HTML like here, like hello and then greeting. So this greeting property or this greeting expression is changing its value on UI as well. So you saw like here, whatever change I do, it is reactive automatically. So this way, like if you want to fetch values from user, so you can use lightning input on the UI, like an HTML file and through that, like you can just implement an event and you can bind a function. And through that function, you can pass the value and you can fill that value into the property. So this is the way like I hope you understood like how we can bind HTML templates with JavaScript file and how we can fetch data using property. So this is all about this property concept that is available in Lightning Web Component. So I hope now you get more clarity on property because from the beginning in each example, I'm using property and in this example, I just explained you like how we can call a function that is available in JavaScript in HTML as well.