September 20, 2023

<template> HTML Template Directives

1- for:each={Array and Map}

• for:item=”currentItem”
• for:index=”index”

iteration.html

<template>
    <lightning-card title="Implement Iteration for:each directives in LWC" icon-name="custom:custom15">
        <div class="slds-m-around_medium">
            <template for:each={data} for:item="item" for:index="index">
                <!-- As Id of the each record is unique so put in key-->
                <div key={item.Id}>
                    <p>Sl No : {index}</p>
                    <p>Name : {item.Name}</p>
                    <p>Email : {item.Email}</p>
                    <hr />
                </div>
            </template>
        </div>
    </lightning-card>
</template>

iteration.js

import {LightningElement} from 'lwc';
export default class Iteration extends LightningElement {
    data = [{
            Id: 1,
            Name: 'Test1',
            Email: 'test1@gmail.com',
        },
        {
            Id: 2,
            Name: 'Test2',
            Email: 'test2test@gmail.com',
        },
        {
            Id: 3,
            Name: 'Test3',
            Email: 'test3t@gmail.com',
        },
    ];
}

2- iterator:iteratorName={array}

• value
• index
• first
• last

iterator.html

<lightning-card title="Implement Iteration for:each directives in LWC">
   <div class="slds-m-around_medium">
      <template iterator:it={data}>
         <div key={it.value.Id}>
            <div if:true={it.first} class="list-first">
               First Item
            </div>
            <div if:true={it.last} class="list-last">
               Last Item
            </div>
            {it.value.Name}, {it.value.Email}
            <hr />
         </div>
      </template>
   </div>
</lightning-card>

iterator.js

import { LightningElement } from 'lwc';
export default class Iteration extends LightningElement {
    data = [
        {
            Id: 1,
            Name: 'Test1',
            Email: 'test1@gmail.com',
        },
        {
            Id: 2,
            Name: 'Test2',
            Email: 'test2test@gmail.com',
        },
        {
            Id: 3,
            Name: 'Test3',
            Email: 'test3t@gmail.com',
        },
    ];
}

3- if:true|false={expression}

lwcIfElse.html

<template>
    <lightning-card title="TemplateIFTrueConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <template if:true={isVisible}>
                <div class="slds-m-vertical_medium">
                    This will display if isVisible will be true!
                </div>
            </template>
            <template if:false={isVisible}>
                <div class="slds-m-vertical_medium">
                    This will display if isVisible will be false!
                </div>
            </template>
        </div>
    </lightning-card>
</template>

lwcIfElse.js

import { LightningElement } from 'lwc';
export default class LwcIfElse extends LightningElement {
    isVisible = false;
    handleChange(event) {
        this.isVisible = event.target.checked;
    }
}

Common Input Types in LWC

Call Apex Class from LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments