Angular - Add div every 3rd row

Question

I am trying to add <div class="clearfix"></div> every 3rd row within ngFor

Here is how I am doing it

<ng-container *ngFor="let foodMenu of item['food_menus']; index as i;">
    <div class="col-sm-4 food-menu-col"></div>
    <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

This does add it every 3rd row, however it adds after the first row as well, the code generates the following html.

<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>

Notice added as the second row. I want to skip it. I want the clearfix div to be added after every 3rd row. I tried with following condition

<div *ngIf="i > 1 && i % 3 == 0" class="clearfix"></div>

Using this, the first clearfix div is added on the 5th row, and then after every 3rd row.

How do I go about adding clearfix div every 3rd row in the loop?

thank you.

Kamil Kiełczewski · Accepted Answer · 2019-04-01 04:18:20Z

3

change div clearfix to

<div *ngIf="i % 3 == 2" class="clearfix"></div>

answered Apr 1, 2019 at 4:18

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

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

2 Comments

Ibrahim Azhar Armar Over a year ago

This works. I wonder why my condition did not work and this did.

Kamil Kiełczewski Over a year ago

index i starts from 0,1,2,3,4,5,... so the value of i % 3 is respectively "0,1,2,0,1,2,..." so i % 3==2 is true for i=2, 5, ... . In your condition i % 3==0 the true was for i=0,3,6,... (so for starting row i=0 too)

Vega · Accepted Answer · 2019-04-01 04:24:35Z

2

The index begins with 0, that's why it's not every third. Try this:

<ng-container *ngFor="let foodMenu of [1,2,3,4,5,6,7]; index as i;">
    <div class="col-sm-4 food-menu-col">{{foodMenu}}</div>
    <div *ngIf="(i + 1 )% 3 == 0" class="clearfix">I am added only every third one</div>
</ng-container>

demo

edited Apr 1, 2019 at 4:24

answered Apr 1, 2019 at 4:21

Vega

28.8k28 gold badges121 silver badges151 bronze badges

3 Comments

Mukyuu Over a year ago

Actually, that's similar to my deleted answer. I just realized OP doesn't consistently declare after the 3rd element. "This does add it every 3rd row" then in the following paragraph "I want the clearfix div to be added after every 3rd row." :(

Ibrahim Azhar Armar Over a year ago

This adds clearfix div every 2nd row instead of every 3rd.

Vega Over a year ago

You mean it should be after every third?

Bijay Yadav · Accepted Answer · 2019-04-01 04:19:51Z

1

As per your requirements. You want to add the div at third row.

Just replace the index as i; with let i = index + 1;.

<ng-container *ngFor="let foodMenu of item['food_menus']; let i = index + 1;">
   <div class="col-sm-4 food-menu-col"></div>
<div *ngIf="i % 3 == 0" class="clearfix"></div>

answered Apr 1, 2019 at 4:19

Bijay Yadav

9781 gold badge9 silver badges23 bronze badges

Comments

Zarna Borda · Accepted Answer · 2019-04-01 04:22:45Z

1

Take 'i' as a variable in for loop it will start value of 'i' from 1.

<ng-container *ngFor="let element of item; let i;">
  <div class="col-sm-4 food-menu-col"></div>
  <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

answered Apr 1, 2019 at 4:22

Zarna Borda

7432 gold badges6 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular - Add div every 3rd row

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related