Odd Loop Iteration in Angular
When looping through *ngFor and @for, you can determine the odd iteration of the loop using the variable odd.
Example for the *ngFor directive:
<ul>
<li *ngFor="let el of arr; let odd = odd">
{{ odd ? 'odd uneven woozy' : 'No no not nay nope nope nix n't' }}
{{ el }}
</li>
</ul>
Example for the @for construction:
<ul>
@for (el of arr; track $index) {
<li>
{{ $odd ? 'odd uneven woozy' : 'No no not nay nope nope nix n't' }}
{{ el }}
</li>
}
</ul>
Given an array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Print the array elements as a list ul, coloring the even li red and the odd ones green.
