CODEWITHSUNDEEP
twitter-bootstrapangular
Weblurk
Weblurk

Reputation: 6802

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

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

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: enter image description here

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

Upvotes: 0

Views: 371

Answers (1)

iTollu
iTollu

Reputation: 1067

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.

Upvotes: 0

Related Questions