 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate how you can render a list using iterator in HTML while implementing a lightning web component. So in my previous video, I demonstrated you rendering lists using for each loop. So we have two different ways you can use for each loop as well as you can use a iterator as well. So jumping to Visual Studio Code. So I'm going to implement a new lightning web component. So rendering list, iterator is the name of lightning web component. So JavaScript file is opened. I'm going to open its HTML file. So in this HTML file, I need to implement the code. And in JavaScript file, I will be using the custom list that I created in the previous video. So I will be reusing that. So let me first implement the HTML file so that I can show you how we can use the iterator. So I'm implementing lightning card and its title will be rendering list using iterator. So now inside this lightning card, I'm going to use an ordered list and applying a class SLDS-M-Around-Medium. So this is lightning design system class that I'm using. And inside this, I'm going to use a template and where I'm writing iterator. colon it equals to and then context. And I'm closing this template. So what is happening here? This context is basically a list. And this list I'm going to assign into this iterator whose name will be it. Right now, if you want to fetch something from that list, so you will be using this it to fetch the values. Here I'm writing list item. So list item, we can write always inside an ordered list. So here, first we need to set the key. So for that, I'm using it.value.id. Right. So what is happening here? It is the name of iterator, which will be having all the context. So through that context, like I'm fetching the value and id I'm assigning into the key. So one by one, it will be processed automatically. And here I'm implementing a div. Here I'm writing conditional statement that is if colon true. And then I'm writing it dot first. Then class equals to list hyphen first. And then I'm closing the div. Then after that I'm writing it.value.name and comma it.value.title. And now I'm going to copy the statement and I'm going to paste it here. So it will be div if true it dot last and here I'm writing list hyphen last. So this way I implemented this template and here like I implemented these three statements. So I'm going to explain these now. So basically iterator has this value. So if you have implemented iterator, so it will be having this value property. So through this value property, you can fetch like id, name and title. So these are the list values which are available inside the list and list this context. Then another property of this iterator is first. So basically what here we are trying to check whether this item in the list is first item or not. So if this id iterator is having the first item, so this if colon true will be true. And this class will be applied on this div. So this div will be rendered if this true will be having true value with the help of this id.first. And similarly we have this div. So if iterator is having last value like last value in the list. So this list hyphen last the CSS will be applied. So now this is a custom CSS that I'm going to implement after this HTML file. So in this video you will also learn like how we can implement a custom CSS in lightning web component. And inside these divs like we have one more statement which is showing name and title. Those are available in the list as a value. So this way I implemented the iterator. So again if I repeat the statement so context is a list which will be having items one by one into this it iterator. So it is the name of the iterator through which we are getting value through dot value dot id value dot name or value dot title. And through this first and last we are just checking whether iterator is having first record or last record. Right now I just need to implement the JavaScript file. So JavaScript file I'm copying from here. So I'm just copying this custom list and I'm going to place it here. Right so this way you can see this is the first record which is available in the list having id name and title. Then we have second record which is having id name and title. Then we have third record which is having id name and title. And then we have fourth record which is having id name and title. So total four reports are available in this list. So all these are custom that I created here and this list will be available here in this HTML and that will be rendered on the UI. Now I am going to close this JavaScript file. So this JavaScript file I'm going to save. Now we need to implement a CSS file as well because we are using custom CSS. So what you can do here we don't have any dot CSS file. So you just need to right click on your component and you can just click on new file. And here you can see under this rendering list iterator a new file will be created. So I'm naming it as rendering list iterator dot CSS. So this way our CSS file is created and here we can write the code. So if I take you to the HTML. So here we are using this class list hyphen first. So that we need to implement here in this CSS. So if you implement your CSS and you use your CSS block as a class. So always you need to write dot and then your class name. Right. So here dot list hyphen first I'm going to implement. And here I need to write the code. So border hyphen top colon one px solid black. So this is CSS for border. So border top will be one pixel solid and color will be black. And then I am applying padding for top that is five pixel. Right. Now I need to apply one more CSS class here. So it will be like list hyphen last and inside this I'm just going to copy and paste these statements. So it is also border like here I'm writing bottom one pixel solid black and padding bottom will be five pixel. So this way you can implement your CSS file. So this is one class that I implemented list hyphen first. So before implementing a class. So you just need to write dot. So it will be automatically treated as a class. So I have implemented two blocks here which are class and those classes I have used here for this diff. I am using list hyphen first and for this div I'm using list hyphen last. So this way you can create your custom CSS and you can use this CSS in your HTML file. Right. So this way we have HTML we have JavaScript and we have CSS as well. Now I need to implement matter on XML file. So here I am writing through then targets target and I am taking target as homepage. I'm saving this code. Now the whole component I need to deploy to the org. So here is the component rendering list iterator. So I'm right click right clicking on this component and selecting deploy source to all. So the whole component will be deployed to the org. So it is deployed successfully. So I'm jumping to the org and I'm going to edit the homepage. So here you can see we have rendering list through for each component. Now if I go to left and scroll to bottom. So here I have rendering list iterator. So I'm just placing it after this right and clicking on save. Moving back. So you will see a slight difference between both. So here we have this horizontal line in the beginning and in the ending. So this is because of iterator. And this is coming because of that CSS we applied. Right. So this way this dev is showing a horizontal line before the first record and this is rendering after the last record. Right. And line is available in black color because we applied black color here. If you want to change the color to red. So that will be applied. So I just changed it and I'm rendering. Sorry. I'm deploying it again from source to org. And once it is deployed, I just need to refresh the page. So here you can see now these lines are in red color. So this way if you want to apply a CSS on your lightning wrap component. So you can create these CSS classes and you can just use those classes with your elements. Those you implement in your HTML file. So this is all about how you can render your list with the help of iterator in lightning web component.