lwc looping till a certain number in html

Question

In lwc for looping through data we have

<template for:each={contacts} for:item="val">
</template>

If i have a variable where in a number is stored, say for example 4. How do i run the loop 4 times in html, inside which i'm trying to create some dynamic elements.

Answer 1

Create an array of 4 items in the JavaScript controller (that is run the loop up to the number there) and reference that much like contacts in your HTML example.

Answer 2

I don't think you have for: loops in LWC, however if you use child components you can sort of do what you want based on index.

Step 1. Define a child component

js

import { LightningElement, track, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api index;

    get shouldDisplay() {
        return this.index <= 4;
    }
}

html

<template>
    <div if:true={shouldDisplay}>
       whatever we want here
    </div>
</template>

Step 2. Use child component in our loop in the parent component

<template for:each={contacts} for:item="val" for:index="idx">
    <c-child-component index={idx></c-child-component>
</template>

(you can also pass along your actual object etc. any other data from val obviously)

This will not stop the loop executing but the items with index > 4 won't render.