Angular 4 *ngFor adding a row div every third column

Question

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>

Please provide the expected output in your question, because I don't understand what you mean here. — n00dl3
– n00dl3, Commented Aug 16, 2017 at 13:07
Yea noticed I type that *ngIf wrong, but that is for the bootstrap snippet so didn't expect that to work when using the bulma framework. (it didn't help either) What I need is to wrap my result around a new columns class every third item in loop. — stig
– stig, Commented Aug 16, 2017 at 13:10
Same as here: stackoverflow.com/questions/27211799/… but with using bulma and angular 4 — stig
– stig, Commented Aug 16, 2017 at 13:11

Younis Ar M · Accepted Answer · 2017-08-16 13:33:31Z

4

change the condition in *ngIf as below.

*ngIf="(index + 1) % 4 == 0"

Plunker example : https://plnkr.co/edit/C0DrgY3Rty33ZRhyML7E?p=preview

answered Aug 16, 2017 at 13:33

Younis Ar M

9397 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nehal Over a year ago

I think the OP wants to add a div after every 3, in your plunker after first iteration, row gets added after every 4. So, I made some tweaks to your plunker :)

Gel Over a year ago

howcome plunker just says loading... ?? cant see any of you guys example rendered on the html. Did I miss anything?

Abdullah · Accepted Answer · 2020-05-22 18:20:06Z

2

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>

answered May 22, 2020 at 18:20

Abdullah

3,0611 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular 4 *ngFor adding a row div every third column

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related