'Best way to loop the angular flex layout with two rows?

I would like to know how to do the ngFor with two rows in angular flex layout.

<div *ngFor="let item of items">
    <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
        <div class="item item-1" fxFlex="50%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
        <div class="item item-2" fxFlex="50%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
    </div>

    <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
        <div class="item item-3" fxFlex="100%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
    </div>
</div>

Here its looping but each time its printing 3 values for every index. I would like to print index 0 value of first column, index 1 on second column and index 2 value on second row.

javascripthtmlangularlayout


Solution 1:[1]

I've created for you an example on stackblitz, based on your requirements.

The correct way would be :

<div class="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap.xs="0">
  <!-- you can use ngClass to manage 'item-1' or 'item-2' style -->
  <div class="item" fxFlex="50%" *ngFor="let item of items">
    <div fxLayoutAlign="center" class="item-label">
        {{item.name}}
    </div>
    <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
  </div>
</div>

The wrap/nowrap property on the fxLayout directive does everything, because childs are set with fxFlex="50%".

I put out fxLayout.xs to render it correctly on stackblitz.

Here is @angular/flex-layout documentation

Hope it helps ;-)

Solution 2:[2]

The "wrap" parameter in the "fxLayout" is used to wrap the child content with the help of "fxFlex"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dun32
Solution 2 kiran

Related Questions