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.

To optimize performance, especially in loops over immutable data, ensure the track expression is effectively used to identify each item uniquely. Because of the potential for poor performance, the track expression is required for the @for loops.

For collections that remain static , track $index provides a straightforward tracking mechanism. For dynamic collections experiencing additions, deletions, or reordering, opt for a unique property of each item as the tracking key.

$index and other contextual variables ​

Inside @for contents, several implicit variables are always available:

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.