 Hello, everyone, I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about HTML templates data binding and I'm going to demo you how you can fetch data using query selector. So in previous two demonstrations, I showed you data binding with the help of property and data binding with the help of data property, right? So here in this example, I will give you a small demonstration around query selector. So first time jumping to HTML file. So I'm just toggling this explorer so that we can have the full space to implement the code. So in this HTML file, I'm just going to remove this code and I'm writing a P tag which will display hello and I'm using this greeting attribute. Now after this P, I'm going to use lightning input then label will be name and value equals to greeting. So by default, this lightning input will be having a greeting as a value and this greeting is a property. So this property's value will be assigned to this value attribute and it will render on the UI. So whenever we will be rendering this lightning web component on the UI, so this lightning input will be having some pre-filled value that is available in this greeting. And in this greeting, we will be storing some value in the JavaScript file. Now after this, I'm using VR tag for line break and then I'm going to use lightning button. So in this demonstration, I'm going to use one more element that is lightning button and its label will be click me and on click of this button, we are going to call a function that is named as handle click. Then we can define the variant as well. So variant I'm defining as brand and I'm closing this lightning button element, right? So in this lightning input, we have used a property in this lightning button, we have used this function which will work on on click event, right? In previous demonstration, if you have seen that video, so in that demonstration, I used on change event here with the lightning input and then with on change, I was calling a particular handle click handle change function. So this way, like if you want to have a function associated with lightning button, so this way you can do. So HTML file is implemented, but it is showing two errors because this greeting and handle click we need to define. So I'm jumping to JavaScript file and I'm just removing this code which I implemented in the previous demonstration. So here I'm going to create a property named as greeting and here I am storing my name. Then I'm going to define a function that is handle click and it will receive a parameter event that we used in previous demonstration as well. So whenever I will be clicking on the button, so this handle click function will be executed because here we have just called handle click function with on click event, right? So now if I save this file, come here, still it is showing the error. So let me just finish the implementation. So now through this event, we will be fetching the value and we will be storing it into greeting property. So this greeting property we are using, reusing here. So that is why I'm using this dot greeting, then equals to, now this is important. This dot template dot and then you need to write query selector. So query selector is a function and here you need to define like which element you want to be selected. So I'm just using lightning hyphen input and then dot value, right? So what will happen? So this dot template dot query selector. So this dot template means this components template. So this components template is available here. Inside this template, wherever you have the query selector like lightning input. So we defined query selector as lightning input. So this lightning input will be selected and its value, whatever is the value, like after changing whatever value is available there. So that value will be fetched and it will be stored in this greeting property. And that greeting property we are displaying here with hello. So once you click on the button, so that handle click function will be executed. It will be assigning the modified value into greeting attribute and that, sorry, greeting property and that greeting property is reactive. So it will show the updated value on the URL. So this way this JavaScript file is implemented. So I'm just saving it. And here we are on HTML. I just saved it as well. So still it is showing some error. So now if you see some problems here. So what you can do, you can just go to this problems tab and you can try to read the error. So it is saying ambiguous attribute value, value equals to greeting. If you want to make it a valid identifier, you should remove the surrounding quotes. Okay. So what I did by mistake, I just used double quotes. So we have to remove this here and from here as well. So double quotes are not required. You can just write them directly, right? So whenever you write value equals to, so sometimes double quotes are available. So you can just remove and then use it like this. So now both HTML and JavaScript files are saved. And this dot XML is already having target as lightning homepage. So now I'm going to deploy this component from source to org. So that whatever changes I have done, that will be deployed. Now I'm going to refresh the homepage so that updated component will be rendered on the UI. So here you can see we have hello, then Sanjay. By default it is showing Sanjay because in greeting property I assigned value as Sanjay. Then name is the label of this lightning input and it is having by default value as Sanjay, right? Now if I remove this and write the cast here and now I need to click on this button. So as I click on this button, so this value will be fast and it will be stored into a greeting property in our JavaScript file. And here after hello, you will see this name. So if I click on click me, you will see the change here. So this way, whatever value you provide in this lightning input, if you click on this button so that value will be fast and it will be stored in greeting property and greeting is reactive. So every time whenever you change something in the property so that that will be reflecting immediately on the UI. So this way, I hope you understood like how we can fast the value with the help of query selector. So through this query selector, I just used lightning input and then dot value. So whatever value was available in that lightning input so it was stored in greeting property and then it was rendering on the UI. So this way, like this was the third way of data binding. So initially like I showed you data binding with the help of property, then I showed you data binding with the help of getters. Now in this video, I just explained to you like how you can bind the data with the help of query selector, right? So this is all about fax data using query selector so that you can implement the data binding in lightning web component.