Angular: Insert New .row On Ngfor Condition

I'm new to Angular so I decided to try their tutorial, but with some small alterations. Basically I have the following array: export const HEROES: Hero[] = [ { id: 11, name: 'Mr

Solution 1:

declare heroes and update it as you want to display in HTML i.e. 3 columns in a row

heroes = [];
HEROES.forEach((hero, index) => {
    if(index % 3 == 0) {
        let row = [];
        row.push(hero);
        this.heroes.push(row);
    } else {
        this.heroes[this.heroes.length - 1].push(hero);
    }
});

it will generate heroes as:

[[{"id":11,"name":"Mr. Nice"},{"id":12,"name":"Narco"},{"id":13,"name":"Bombasto"}],[{"id":14,"name":"Celeritas"},{"id":15,"name":"Magneta"},{"id":16,"name":"RubberMan"}],[{"id":17,"name":"Dynama"},{"id":18,"name":"Dr IQ"},{"id":19,"name":"Magma"}],[{"id":20,"name":"Tornado"}]]

then you can update HTML as you want.

HTML

<div class="row" *ngFor="let rowData of heroes">
    <divclass="col-lg-4 bg-lightblue rounded" *ngFor="let hero of rowData"><pclass="text-secondary lead"><spanclass="text-info text-uppercase lead font-weight-bold">{{ hero.name}}</span> Details
        </p><p><spanclass="font-weight-bold text-success">ID: </span>{{ hero.id }}
        </p><p><spanclass="font-weight-bold text-success">Name: </span>{{ hero.name }}
        </p><labelclass="font-weight-bold">Change name: 
            <input [(ngModel)]="hero.name"class="input-md"type="text"placeholder="name"></label></div></div>