Lesson: 16 | Render Lists | for:each

Notes
Video

Notes

To render a list of items, use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested <template> tag that encloses the HTML elements you want to repeat.

The iterator directive has first and last properties that let you apply special behaviors to the first and last items in an array.

exampleForEach.html

<template>
    <lightning-card title="ExampleForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

exampleForEach.js

import { LightningElement } from 'lwc';

export default class exampleForEach extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'John Carter',
            Title: 'Salesforce Administrator',
        },
        {
            Id: 2,
            Name: 'Will Smith',
            Title: 'Salesforce Developer',
        },
        {
            Id: 3,
            Name: 'Jennifer Lopez',
            Title: 'CEO',
        },
    ];
}

Prev You need to login to have access to the quizzes. Next

Mastered by 28 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 16 | Render Lists | for:each

Notes

exampleForEach.js

Lightning Web Components