@for
The @for block repeatedly renders content of a block for each item in a collection.
Syntax
@for (item of items; track item.name) {
<li> {{ item.name }} </li>
} @empty {
<li> There are no items. </li>
}
Description
The @for block renders its content in response to changes in a collection. Collections can be any JavaScript iterable, but there are performance advantages of using a regular Array.
You can optionally include an @empty section immediately after the @for block content. The content of the @empty block displays when there are no items.
track and objects identity
The value of the track expression determines a key used to associate array items with the views in the DOM. Having clear indication of the item identity allows Angular to execute a minimal set of DOM operations as items are added, removed or moved in a collection.
Loops over immutable data without trackBy as one of the most common causes for performance issues across Angular applications. Because of the potential for poor performance, the track expression is required for the @for loops. When in doubt, using track $index is a good default.
`$index` and other contextual variables
Inside @for contents, several implicit variables are always available:
| Variable | Meaning |
|---|---|
$count |
Number of items in a collection iterated over |
$index |
Index of the current row |
$first |
Whether the current row is the first row |
$last |
Whether the current row is the last row |
$even |
Whether the current row index is even |
$odd |
Whether the current row index is odd |
These variables are always available with these names, but can be aliased via a let segment:
@for (item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}
The aliasing is especially useful in case of using nested @for blocks where contextual variable names could collide.