@angular/core

@for

block

The @for block repeatedly renders content of a block for each item in a collection.

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:

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.

Jump to details