How to iterate two elements in a row with ngFor?

yotube
0

Issue

I have array of strings and I want to place every two of them in a row with ngFor. Here is what I tried:

<div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'>
<div class='col-md-6'>
<md-card>
<md-card-header>
<md-card-title>
{{index}}
</md-card-title>
</md-card-header>
</md-card>
</div>
<div class='col-md-6' *ngIf='i+1 < myArray.length'>
<md-card>
<md-card-header>
<md-card-title>
{{myArray[i+1}}
</md-card-title>
</md-card-header>
</md-card>
</div>
</div>

But when I add a new element, it duplicates the previous element and I really don't underestand the reason. How can I add two elements in each row with ngFor?


Solution

You can skip every other index just by looking for even numbers (0, the first index is even) for *ngIf, and display that items with the next soon be skipped (odd) item:

<div class='row wow fadeInUp' *ngFor='let index of myArray; let i = index; let even = even'>
<span *ngIf="even">
<div class='col-md-6' >
<md-card>
<md-card-header>
<md-card-title>
{{myArray[i]}}
</md-card-title>
</md-card-header>
</md-card>
</div>
<div class='col-md-6'>
<md-card>
<md-card-header>
<md-card-title>
{{myArray[i+1]}}
</md-card-title>
</md-card-header>
</md-card>
</div>
</span>
</div>

DEMO EXAMPLE



Answered By - Vega

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top