 Hello everyone, I am Sanjay Gupta, I welcome you on Sanjay Gupta Tech School. In this video, I am going to demonstrate how you can render multiple templates in Lightning Web Component. So let's first understand the scenario. So for example, if we have created a Lightning Web Component named as miss multiple templates. So whenever you will be creating this Lightning Web Component. So .html, .javascript and .js mat.xml files will be created automatically. If you want to apply CSS or styles, so you can create .css file. And additionally, if you want to create additional HTML files, so you can create those as well. So here you can see we will be creating template 1.html and template 2.html files in the same Lightning Web Component where already one HTML file is available. So I will demonstrate you if we create more than one HTML files in a Lightning Web Component. So how we can use them all together. So let's jump to Visual Studio Code so that we can create a Lightning Web Component. So here I am right clicking on this LWC folder and creating a new Lightning Web Component. So I am naming it as miss multiple templates. So here you can see this component is created and these three files are created automatically. So you can see .html file is available, .js file is available and .js mat.xml file is also available. So first of all I am going to implement the code which is required for these three files and then I will be creating template 1 and template 2.html. So right now this miss multiple template.html will be blank. I will be focusing on this .js file. So in this JavaScript file I will be importing those template 1.html and template 2.html. So I am writing import statement. So I am going to import template 1 from then inside single quotes I am writing .slash template 1.html. So you might be thinking like where is template 1.html. So after implementation of this JavaScript code I will be creating this template 1.html file inside this lightning web component. So similarly I am going to import template 2. So this way both template 1 and template 2.html will be imported and they will be represented through this name that is template 1 and template 2. And here I have used .slash. So .slash represents both these .html files are part of this lightning web component. If these files are created in any other lightning web component. So in that case I need to use .slash and that file name. So this is the difference. So in upcoming examples I will be demonstrating like if file is available in any other lightning web component so how you can use that. So in this example this template 1 and template 2.html will be available in the same lightning web component which is mislineas multiple templates. So that I will be importing later. So first I am implementing this JavaScript file. So here I am creating a variable named as template 1 and I am initializing it as true. Now I am going to use a function which is named as render. So whenever component loads on the UI so this render function executes automatically. So now here I am going to check return this .template1 then I am placing question mark so it means this .template1 so this template 1 variable if it is having value as true. So template 1 will be rendered and if it is having value as false then template 2 will be rendered. So wherever I am using this .template1 it means I am referencing this variable. So this is the differentiation because here you can see I used template 1 twice. So above template 1 which I used with import statement which it is representing this template 1.html which is written over here after question mark. The template 1 the variable which I created here it is used with this .template1. So this is the reason why we use this with the variable so that if you use that variable name for any other identification so you can clearly distinguish variable and those other identifiers. So this template 1 is we are using that is available here with import and this .template1 is a variable and question mark and colon is basically a conditional operator. So this part will be known as condition if it is true then this question mark part will be evaluated or executed if this .template1 is false then whatever is written after the colon sign will be executed. So right now this template 1 variable is having value as true so it means it will render template 1.html because it is represented through this template 1 identifier. Now I am going to implement one more method which is switch template. And this method I am writing this .template1 equals to this .template1 so again if I am using this .template1 it means I am using this variable which is declared here at line number 5. So now I am just comparing it with true and again I am using question mark and colon. So understand it it is very simple. So this is the condition. So condition says if this variable template 1 is equals to true so it will be returning false and false will be assigned to this template 1 variable. So it means if the template 1 variable is having true then it will be automatically having false and if it is having false then it will be having true because here in false part we are having true. So vice versa will be happening ok. So this way I implemented this JavaScript file which is available here with this component. Now we need to implement this template 1.html and template 2.html. So now I am going to right click on this and I am going to create new file and naming it as template 1.html. So you can see this template 1.html is created inside this lightning web component ok. So here I need to implement the code. So I am writing template inside template I am going to write another elements. So I am using lightning card and its title will be template 1. Now inside this lightning card I am going to use a div and inside this div I am writing this is template 1 so that whenever it will be rendered on the UI so you can recognize which template is rendered because we are having two templates. One is template 1 and one is template 2. Now after this div I am going to use p tag and I am applying a class and this class is a predefined class which is margin hyphen vertical hyphen small. Now inside this p I am going to use a lightning button its label will be switch templates and on click of this button I am going to call that switch template function. So I need to remove this double codes because when we call any function so we don't need to use double codes we need to enclose it in curly basis right. So this way lightning button is implemented and this p tag is closed and lightning card is closed so this way template 1 whole code is implemented I am copying this complete code and I am right clicking on this lightning web component clicking on new file and I am creating template 2.html file and here I am pasting the code so here I just need to change little bit so here I am writing 2 instead 1, 2 instead 1 and this whole code will be same so whenever I will be clicking on this button so this switch template function will be executed right. So this way template 1 and template 2 html files are created we are importing these files here at line number 2 and 3 and as per this variables value if it is true so template 1 will be rendered if it is false then template 2 will be rendered and for switching we have already defined this switch template function right. So now it's time to implement .xml file so that we can place this component on the UI and we can check the behavior of this lightning web component whether it is working fine or not so targets and here I need to define the target so I am picking lightning home page right so I will be placing this on the home page of particular app so all the files are saved now this lightning web component is ready to deploy so I am just right clicking and deploying from source to orbit so once this component is deployed so a success message will be available so here you can see success message is available. Now I am jumping here and you can see we are on the home page of sales application so I am going to place the component here so for that you just need to click on this gear icon which is available at top right corner click on edit page so lightning app builder will be opened and if you go to left and scroll to bottom so here you will see your component so we created miscellaneous multiple templates so I am just clicking and drop dragging and dropping it and I am clicking on save so changes are saved and here you can see template one is rendered because by default if we go to JavaScript file so template one is true so by default template one is rendered on the UI because of this render function right and here you can see this message available this is template one it is because we wrote it here inside the div then we have a lightning button whose label is switch template so you can see this button is available now as I click on this button so the switch template function will be executed it is available here which will check the value of template one variable it is right now true so it will be assigning as false automatically right so I am clicking on this button and you can see the message is template two automatically if I click again so it is showing template one so this way if you create a lightning web component and if you have more than one html files and you want to render those files basis on particular condition so you can import those files like this you can use like dot slash and then file in dot html and you can use any identifier to identify those files and accordingly you can just render those files on the UI so this way I hope you understood how we can render multiple templates with the help of lightning web component and if you want to apply some css so you can create this css file as well so in upcoming video I will be demonstrating how we can apply styles in lightning web component so keep watching the videos and I hope you understood how we can render multiple templates and lightning web components with the help of this video thank you