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