trying to populate a template with ngfor where the first 2 elements should be exposed as a row,-CodePudding

I´m trying to commit this task where through a ngFor iterating an array i must to display the first 2 elements of that array in a row, then the other elements in a descending column. Kind of:

first  second

third

fourth

fifth

..nth

for that i iterate over the array and trying to apply ngclass to condition the first two elements i set this:

                    <div class="d-flex flex-row">
                      <div *ngFor="let item of array; let i = index">
                        <span [ngClass]="{ 'd-flex flex-column': i > 1 }">
                          <div>{{item}}</div>
                        </span>
                      </div>
                    </div>

But that´s not clearly working cause all the elements are displayed in row still. Any comment about how can i improve this?. Thanks in advance

CodePudding user response：

A SPAN or DIV flex CSS styled container that aligns content within the same row requires any content to be wrapped within it's own DIV.

In the code below I have removed the d-flex CSS class in the first line and the flex-column CSS class from the SPAN to keep the div content onto the same line for the first two items.

Before you can place the first two elements in a flex within the same container element, you will need their values beforehand. Alternatively, store the first two values in the first element of a list within your component code and read them as the first item of your array and output on each row.

Try this:

<div class="flex-row">
    <div *ngFor="let item of myArray; let i = index">
        <span *ngIf="i==0">
            <div class="d-flex">
                <div>{{myArray[0]}}</div>
                <div>&nbsp;</div>
                <div>{{myArray[1]}}</div>
            </div>
        </span>
        <span *ngIf="i==1">
        </span>
        <span *ngIf="i>1">
            {{item}}
        </span>
</div>

The above will give you the desired output.