Angular 4 *ngFor adding a row div every third column

user_3544503 0
Viewed 13303

I am using Angular 4 with the bulma css framework and I am wondering how I can add a new row (or columns class) every third column.

The index variable which prints out 0,1,2 0,1,2 etc. was when I looking at a snippet when using bootstrap.

Noticed some comments on maybe I can use the template syntax but didn't get that to work either.

<div class="columns">
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index">
      <app-item-details [item]='item '></app-item-details>
      {{ index % 3 }}
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div>
  </div>
</div>
bulma ngfor angular
2 Answers

Below Solution work for me:

<div class="form-group">
    <div class="row">
        <div class="col-xl-4" *ngFor="let item of productimages; let index = index">
            <img [src]="item.image">
        </div>
    </div>
</div>

enter image description here

user_101819290
Related