Template Looping in LWC
<template>
<lightning-card title="for:each loop">
<div class="slds-var-m-around_medium">
<template for:each={carList} for:item="car">
<ul key={car} class="slds-has-dividers_around-space">
<li class="slds-item">{car}</li>
</ul>
</template>
</div>
</lightning-card>
<lightning-card title="for:each loop with array of objects">
<div class="slds-var-m-around_medium">
<template for:each={ceoList} for:item="list">
<ul key={list.id} class="slds-has-dividers_around-space">
<li class="slds-item">{list.name} {list.company}</li>
</ul>
</template>
</div>
</lightning-card>
<lightning-card title="iterator loop">
<div class="slds-var-m-around_medium">
<template iterator:ceo={ceoList}>
<div key={ceo.value.id}>
<ul class="slds-has-dividers_around-space">
<template if:true={ceo.first}>
<div class="slds-box slds-theme_shade">
<strong>
List of top companies and there COE's
</strong>
</div>
</template>
<li class="slds-item">
<strong>{ceo.value.company} </strong>
{ceo.value.name}
</li>
<template if:true={ceo.last}>
<div class="slds-box slds-theme_shade">
<strong>
Thanks for reading the list
</strong>
</div>
</template>
</ul>
</div>
</template>
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
export default class Looping extends LightningElement {
carList =["Ford", "Audi", "Maruti", "Hyundai", "Mercedes"]
ceoList = [
{
id:1,
company:"Google",
name:"Sundar Pichai"
},
{
id: 2,
company: "Apple Inc.",
name: "Tim cook"
},
{
id: 3,
company: "Facebook",
name: "Mark Zuckerberg"
},
{
id: 4,
company: "Amazon",
name: "Jeff Bezos"
},
]
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Conditional Rendering in LWC Accessing Elements in the Component in LWC