HTML template directives
The lightning component provides the Dynamic behavior to the template. It helps us to render the template in different conditions.
Below are the HTML template directives
for:each={array}
For:each directive is used to iterate the array and render it. You must use a key directive to assign a unique ID to each item on the list.
To access the current item in for each we need to use the for:item=”currentItem” and to access the current item’s index, use for:index=”index”.
Let’s create the apex method
Accountcontroller.js
public class accountclass {
@AuraEnabled (cacheable=true)
public static List accountclass() {
List acc=[select id,name from Account limit 5];
return acc;
}
}
Create the component
Salesforcedriller.html
<template>
<lightning-card title="Account List using Apex Wire To Function in Salesfroce Driller" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template for:each={accounts} for:item="acc">
<p key={acc.Id}>{acc.Name}</p>
</template>
</template>
</div>
</lightning-card>
</template>
Salesforcedriller.js
import { LightningElement, wire,track } from 'lwc';
import accountclass from '@salesforce/apex/accountclass.accountclass';
export default class AccountListLWC extends LightningElement {
@track accounts;
@track error;
@wire(accountclass)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data;
} else if (error) {
console.log(error);
this.error = error;
}
}
}
Output
Explanation
<template for:each={accounts} for:item=”acc”>
<p key={acc.Id}>{acc.Name}</p>
</template>
As we can see in the above example we have the loop directive which has the attribute of for:each and for:item.for:item holds the value of every rotation.
if:true|false={expression}
This helps to render the template conditionally.To achieve this in Salesforce Lightning Web Components we have to use if:true and if:false in the <template> tag.
Create the component
Salesforcedriller.html
<template>
<lightning-card title="Salesforce driller Conditional Rendering">
<div class="slds-p-around_small">
<lightning-input type="checkbox" label="Check" checked={flag} onchange={handleChangeevent}></lightning-input>
<br></br>
<template if:true={flag}>
<div class="slds-p-around_small">
Hello salesforce driller with conditional rendering
</div>
</template>
</div>
</lightning-card>
</template>
salesforcedriller.js
import { LightningElement, track } from 'lwc';
export default class ConditionalRendering extends LightningElement {
@track flag = false;
handleChangeevent(event) {
this.flag = event.target.checked;
}
}
Output
Explanation
<template if:true={flag}>
<div class=”slds-p-around_small”>
Hello salesforce driller with conditional rendering
</div>
</template>
Rendering will be based on the checkbox on the checkbox and the checkbox will print the text.if checkbox is true then flag will set to true and the template print the markup.
iterator:iteratorName={array}
This works the same as for:each directive but We Use this directive to apply special behavior to the first or last item in an array and render a list in your component.
Access these properties on the iteratorName:
- value—The value of the item in the list.
- syntax is iteratorName.value.propertyName.
- index—The index(0,1,2..) of the item in the list.
- first—check whether the item is the first item on the list.
- last—check whether the item is the last item on the list.
Create the component
Salesforcedriller.html
<template>
<lightning-card title="Salesforce Driller" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template iterator:it={salesforcedriller}>
<li key={it.value.Id}>
<div if:true={it.first} class="list-first">
This is First Item Name: {it.value.Name}
</div>
{it.value.Name}
<div if:true={it.last} class="list-last">
This is Last Item Name: {it.value.Name}
</div>
</li>
</template>
</ul>
</lightning-card>
</template>
salesforcedriller.js
import { LightningElement, track } from 'lwc';
export default class ConditionalSalesforcedriller extends LightningElement {
salesforcedriller = [
{
Id: 1,
Name: 'salesforcedriller-I'
},
{
Id: 2,
Name: 'salesforcedriller-II'
},
{
Id: 3,
Name: 'salesforcedriller-III'
},
];
}
Output
