How to iterate two elements in a row with ngFor
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
ngFor
exposes odd
and even
which can be used to conditionally (using ngIf
) display some items.
<ul>
<li *ngFor="let item of array; let even = even">
<ng-container *ngIf="even">{{ item }}</ng-container>
</li>
</ul>
That said, it's probably better you do this in your code instead of in the template. It's clearer, testable and more perfomant.
evenItems = array.filter((_, index) => index % 2 == 0)
Then just loop over those.
<ul>
<li *ngFor="let item of eventItems">
{{ item }}
</li>
</ul>