*ngFor flexbox row direction

Question

In Angular 5, *ngFor generate <div> elements in a column direction instead of row direction:

html:

    <div class="charts"  *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn"
          style="padding-top: 0.5em">
          <div class="item">
            <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
            </span>
          </div>
    </div>

css:

    .charts{
      display: flex;
     flex-direction: row;
    }

    .item{
      display: flex;
      flex: 1
    }

How can I change it to all elements be in the same row?

Thanks

score 1 · Answer 1 · answered Apr 14 '20 at 19:09

You need to add the *ngFor to your item, not the charts:

<div class="charts" style="padding-top: 0.5em">
  <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
    <span style="background-color: rgb(127, 140, 255); height:120px;">
      number {{i}}
    </span>
  </div>
</div>

_{on a side note, don't use inline styling like that. Those need to be moved to a component css file}

score 1 · Accepted Answer · answered Apr 14 '20 at 19:10

1

You should rearrange as

<div class="charts" style="padding-top: 0.5em">
      <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
        <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
        </span>
      </div>
</div>

The display: flex; flex-direction: row; should be on the parent div

answered Apr 14 '20 at 19:10

Shashank Vivek

15,676
8
57
96

Thanks, I did it, second step is to control how many 'span' will be in each row. I want to have 2 'span' in each row. I I set 'flex-basis:50%' it not works – larry ckey Apr 15 '20 at 04:35
I add to 'item' 'flex-basis:50%' and 'flex-wrap: wrap;' it not works – larry ckey Apr 15 '20 at 04:43
@larryckey: Take a look at https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row . Take a look at `flex: 0 1 calc(20% - 8px);` . A small demo code https://plnkr.co/edit/f6s8D3JB4pplLUjk?open=lib%2Fscript.js . – Shashank Vivek Apr 15 '20 at 05:05
thanks, your examples helped me, I made a few changes and all works great, Thanks – larry ckey Apr 18 '20 at 16:44
@larryckey : awesome ! – Shashank Vivek Apr 18 '20 at 17:39

*ngFor flexbox row direction

2 Answers2