Using ngFor in Angular2, how can I do an "inner" ngFor?

Question

Question might be hard to understand but my problem is simple:

I want to display a list of contacts.
I'm displaying them as cards using bootstrap
I want each row to show 4 cards

HTML structure:

  <div class="row" *ngFor="let contact of contacts">
    <!-- Here I want to loop 4 of the contacts before rendering a new row -->
    <div class="col-md-3"> 
      <contact-card [contact]="contact"></contact-card>
    </div>
  </div>

Or more simplified, I want to do achieve this:

Is there a way to do an "inner" ngFor in col-md-3 div, which stops after rendering 4 contacts?

Sounds like http://stackoverflow.com/questions/42557781/angular-2-show-hide-wrap-tag-in-ngfor-over-even-odd-items/42558062#42558062 — Günter Zöchbauer, Mar 03 '17 at 10:06
You could add `let i = index` to your `*ngFor` and then you will have the index of the current card on `i` variable. — Bejan George, Mar 03 '17 at 10:07
A similar question was asked here: http://stackoverflow.com/q/42268913/6806381 - The solution was to first split the array into sub arrays, then iterate with nested `*ngFor`'s — Christopher Moore, Mar 03 '17 at 10:29

score 0 · Answer 1 · answered Mar 03 '17 at 10:11

You could create two components: one to display a single card, and second - to display a row of cards.

More code overall, but each component is simpler, more cohesive and reusable; the two components are decoupled.

At last, you could process all the cards' data as stream and form batches of required amount of cards to fill rows.

Using ngFor in Angular2, how can I do an "inner" ngFor?

1 Answers1