The even value is a boolean local template value that is true when the current item occupies an even position in an Angular repeated sequence. It supports conditional bindings such as alternating table-row styles. section 12.2.3
Use the value through a local template variable:
- Assign it in an ngFor expression with let-even="even". section 12.2.3
- Reference the variable in bindings on the repeated element or its nested content. section 12.2.3
- Apply a class binding such as [class.table-warning]="even" to style even rows. section 15.3.1
- Usually choose either even or odd, because the boolean values are opposites. section 12.2.3
Striped rows with even
<tr *ngFor="let item of products(); let-even = even" [class.table-warning]="even">...</tr> The binding adds the table-warning class to rows whose repeated-sequence position is even. section 12.2.3
Listing 15.12. Using directive context data in the template.html file in the src/app folder
<div class="p-2">
<div class="form-check m-2">
<input type="checkbox" class="form-check-input"
[(ngModel)]="showTable" />
<label class="form-check-label">Show table</label>
</div>
<table *paIf="showTable"
class="table table-sm table-bordered table-striped">
<thead>
<tr><th></th><th>Name</th><th>Category</th>
<th>Price</th></tr>
</thead>
<tbody>
<ng-template [paForOf]="products()" let-item let-i="index"
let-odd="odd" let-even="even">
<tr [class.table-info]="odd"
[class.table-warning]="even">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
Inspect a complete template that exposes even through a custom structural directive and uses it alongside odd to create alternate row classes. section 15.3.1
