How to create new row using ngFor

Question

I'm trying to make new row using *ngFor:<div class="row"> <div class="col-lg-3" *ngFor="let user of users">{{user.username}}</div> </div>

And then, if col div`s > 4, i need to create new row. How can i do it?

which bootstrap are you using ? Can you show a working sample. It should automatically move the 4th div to next line if its bootstrap 4 — Nandita Sharma, Jul 06 '18 at 11:54
Then there is no need of creating a new row if 4th element comes, it should wrap automatically — Nandita Sharma, Jul 06 '18 at 12:03
It doesn't working automatically :( Bootstrap moves next 4 div's down the page, but if i create new row it works correctly. — Vlad, Jul 06 '18 at 12:09

Debojyoti · Answer 1 · 2018-07-06T12:30:57.253

1

If you want to create div elements of row class using ngFor, then put the directive in that div.

ngFor will add content including the div it is written in

So in your example, it will be

HTML

<div class="row" *ngFor="let row of rows;let i = index">
   <div class="col" *ngFor="let col of row;let j = index">
     Row {{i}} Col {{ j }}
   </div>
</div>

TS

export class AppComponent  {
  public rows = [
    [1,1,1,1],
    [1,1],
    [1,1,1]
  ]
}

Working example : stackblitz.com

edited Jul 06 '18 at 12:30

answered Jul 06 '18 at 11:52

Debojyoti

4,503
3
19
27

No, i need something like this: 1t row -> 4 cols; 2d row -> 4 cols; 3d row -> 4 cols – Vlad Jul 06 '18 at 12:02
Those 4 cols for each row are constant or dynamic, like 1st row-> 4 cols, 2nd row->3 cols ... etc @ВладМайлз – Debojyoti Jul 06 '18 at 12:22
Check my new edit @ВладМайлз – Debojyoti Jul 06 '18 at 12:31

How to create new row using ngFor

1 Answers1