Can you use a ngFor with a modulus operator in Angular 2

Question

I'm writing out images to the web page. Every three images I would like to start a new row. Does angular 2 support this?

Answer 1

You can achieve it by doing following:

<div *ngFor="let t of temp(math.ceil(arr.length/3)).fill(); let i = index" class="row">
  <div *ngFor="let item of arr.slice(3*i,3*i + 3);" class="item">
    {{item}}
  </div>
</div>

And in your component:

export class App {
  temp = Array;
  math = Math;
  arr= [1,2,3,4,5,6,7,8,9,10,11];
}

Here's working Plunker

Answer 2

You can access the index of the iteration from the *ngFor like so:

*ngFor="let x of container; let i = index;"

you can then reference that index in an *ngIf inside of the *ngFor to display your new row:

<div *ngIf="i%3 === 0">