 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about conditional rendering in HTML. So basically, when you implement your Lightning Web Component, and you want to render certain elements conditionally, so you can apply if-else condition in the HTML file of your Lightning Web Component. So in this video, I will be demonstrating you how you can implement conditional rendering in HTML file of Lightning Web Component. So let's jump to Visual Studio Code. So here I'm going to create a new Lightning Web Component. So I'm right clicking on this LWC folder and I'm going to create a new Lightning Web Component. So I'm naming it as conditional rendering. So this component is created. Now I'm just moving to its HTML file. So I'm clicking on this top left corner, which is Explorer, so that I can have the full HTML file on the page. So here I'm going to implement the code. So first of all, I'm going to implement a Lightning Card. And if you implement any Lightning Card and you want to provide a title for it, so you can do that as well. So here I'm going to provide a title conditional rendering. Now, inside this Lightning Card, I'm going to implement the code. So I'm going to implement a div here. And for div, I'm going to apply a class. SLDS-M-Around-Medium. So this is basically a predefined class that I'm using here. So if you want to see all these predefined classes for styling purpose, so you can just search for Salesforce Lightning Design System on Google and you will have a link for that Salesforce Lightning Design System. And if you open that link, so you will find all the predefined classes that you can use with the elements. So inside this div, I'm going to implement a Lightning Input. And this Lightning Input type will be a checkbox, right? And the label of this checkbox will be Show Details. And on change of this checkbox, I want to call handle change function, right? So this handle change function I need to define in the JavaScript file. And after this, I'm going to close it, right? So this way, I just created a Lightning Input. It's type is checkbox. Label will be Show Details. And when I toggle that checkbox, like check or uncheck, so this handle change function will be called. And this handle change function I need to define in the JavaScript file. Now, after this Lightning Input, I'm going to implement a template. Then here I'm going to write if Poland True. Then equals to an inside curly basis, I'm writing our details visible. So this is basically a property. This property I'm going to create in the JavaScript file later. So if this property is having value as True. So this if-true will be True. And if it is True, so the block which is created here, the code, whatever code I will be writing inside this template, so that will be rendered on the UI. So here I'm writing a div and I'm using a class here. So again, this class also you can find under Salesforce Lightning Design System Library. So this is a div and inside this div, I'm writing this is True block. Okay, so this way one part of conditional rendering is complete. So here I just implemented the true block. Now I need to implement the false block as well. So I'm just copying and pasting it. And instead of if-true, here I'm writing if-false. And I'm using the same property here, our details visible. So if this property is having value as false. So here this is false block. This will be rendered on the page. So this way this HTML file is completely implemented. So I hope you understood each and every statement properly because I tried to explain all the statements while implementing this code. So now we need to do two things in the JavaScript file. First of all, we need to declare this property and we need to define this handle change function. So I'm clicking on this toggle and I'm going to click on this JavaScript file. And here I'm going to create a property. So our details visible and initially I'm assigning it as false. So by default this property will be having false. So whenever I will be rendering this lightning web component on the page. So this false block will be executed and this is false will be rendered on the UI. And once I check this checkbox as true. So here I'm going to define this function. So handle change and it will be receiving an event. So this event will be having all the information related to that checkbox. So now basis on that checkbox value. I'm going to set the value into this property are details visible. So here I'm writing this dot are details visible equals to even dot target dot checked. Right. So if the checkbox is checked so that checked value will be assigned into this property. If it is unchecked so that value will be assigned into this property. And this property is declared in JavaScript file. And as I already explained you if you create any property in JavaScript file. And if you use that property in that JavaScript file. So you need to use it with the help of this keyboard. Right. So now I am just saving JavaScript file. And now I'm going to save the HTML file. Okay. So here we need to understand one more thing. So you can see here that underline is available. Something is wrong with this. So if you see this kind of scenario. So you can see here under this problem section or problem tab. You will be having the error message. So if you hover on this. So it says like if you want to make it a valid identifier, you should remove the surrounding quotes on change equals to handle change. So this way like I mistakenly put double quotes here. And if you want to link a function with on change events, so you won't be able to use this double quotes. So you just need to remove this double quotes and you can see that problem is gone. And now you will be able to save this HTML file. Right. So this way if you encounter any problem in your code so that you can see under this problem stamp and proper error message will be available so that you will be able to resolve the problem. So this way HTML file and JavaScript file both are implemented. Now I just need to implement the matter dot XML. So here I am just writing is exposed as true. Then I need to set targets. And here I am setting a target. So I will be placing this on lightning homepage. Right. Because it is not related to any record base. So I will be placing this component on the homepage. So I just selected target as lightning underscore underscore homepage. Now all the files are saved. So I'm just going to deploy this component to the org. So I'm selecting. So first I right clicked on the component and I'm selecting deploy source to org. So this whole component along with HTML JavaScript and dot XML file. The whole component will be deployed to the org. Now I'm jumping to the org and I'm going to edit this homepage. And on this homepage I'm going to place this component so that we can see the results. So here you can see conditional rendering component is available. And I'm going to place it here above today's events. And I'm just clicking on save. So if I go back. So now we need to review this component carefully. So I am just zooming in. So here you can see it is showing a title conditional rendering. So this is because in HTML I just placed this title along with lightning card. So in some of the previous videos I use lightning card without title. So in those videos also if you if you implement those codes so you can just have a title as well so that your block will be having a title. Then here you can see this checkbox is available and its label is show details. It is by default unchecked. Right. And we are seeing this message. This is false block because this R details visible property is having default value as false. So that is why this false block is rendering here. Now I'm going to check this checkbox. And you can see the output is displaying this is true block. Right. This is because we are using conditional rendering. So right now this R details visible is true because once I clicked on the checkbox as checked. So this handle change change function executed and this handle changes assigning that check the value to this R details visible. So it is now true. If it is true then true block will be evaluated and false block will not be evaluated. Right. So this is reactive as soon as you check this checkbox. So your output will be rendering accordingly. Now I'm unchecking it so you can see it is showing this is false block. So this way this checkbox is reactive. If you check it so accordingly you will be having the result. If you uncheck it so accordingly you will be having the result on the UI. So this way with the help with the help of this video I hope you understood like how we can conditionally render elements on the UI with the help of HTML file. So you just need to use template if Poland true and template if Poland false. So this is the syntax if you want to apply conditional rendering in your HTML file.