Counting up in ngFor - Angular 2

Question

I have a problem counting up the ngFor Loop in Angular 2. Im trying to develop a grid that has 3 columns and a dynamic amount of rows. I would like to loop through my array and add the elements from left to right and every three elements it should jump to the next row. Im using Ionic Framework 2.0.

My code looks like this:

   <ion-row *ngFor="#m of movies; #i = index"  (click)="movieTapped(m)">
        <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
                {{m.Title}} <br>
                Rating:     {{m.imdbRating}}<br>
                Rated:      {{m.Rated}}<br>
                Released:   {{m.Year}}<br>
            </div>
        </ion-col>
        <ion-col  width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
  </ion-row>

Hope you can help me out.

Cheers!

Answer 1

If you don't want to format your data structure into groups of columns (which I can understand) then you can still render columns 3 per row. For this you will need to precalculate additional helper array of row indexes, e.g. [0,1,2,3]. Number of the elements in the array should be equal to the number of ion-row you want to render. So in your controller constructor function you can do something like this:

this.rows = Array.from(Array(Math.ceil(this.movies.length / 3)).keys())

Then in template you will have two ngFor loops:

<ion-row *ngFor="#i of rows" (click)="movieTapped(m)">
  <ion-col *ngFor="#m of movies | slice:(i*3):(i+1)*3" width-33>
    <div class="row responsive-md">
      <img [src]="m.Poster" width="100%" /> {{m.Title}}
      <br> Rating: {{m.imdbRating}}
      <br> Rated: {{m.Rated}}
      <br> Released: {{m.Year}}
    </div>
  </ion-col>
</ion-row>

That's it. Depending on the current row index slice pipe renders necessary items per row.

Here is simplified demo: http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

Answer 2

You don't have to do any change in the data! Ionic 2 already providing the support for it.

We can use the wrap in <ion-row>. Example: <ion-row wrap>

Source

Use the wrap attribute on an <ion-row> element to allow items in that row to wrap. This applies the flex-wrap: wrap; style to the <ion-row> element.