@for block

Renders the content of a block repeatedly for each item of an iterable

6 snippets

16 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

The @for block in Angular iterates over each item in a given collection and renders the content of a block repeatedly for each item.

This collection can be any JavaScript iterable, such as an array, a set, or a map.

Using a regular Array is often preferred due to its performance benefits, such as faster access times and optimized memory usage. Arrays in JavaScript are highly optimized for iteration and manipulation, making them the most efficient choice for scenarios where frequent rendering updates are required in Angular applications.

# Display list of items with `@for` block

SWITCH LAYOUT

src/app.component.ts

Add another item to the array

Click or in the editor to practice

The @for (item of items) block is used to iterate over an array and render each product in a list <li> item .

The track function is used to optimize the rendering process by helping Angular identify items in a collection.

track

To optimize rendering and ensure Angular can effectively track items, you should use unique identifiers whenever possible. When the items in the collection are objects, it makes sense to use a unique identifier (like an ID) to track them. However, when the items are simple values like strings, using the item itself can be problematic.

Since the array may contains multiple items with the same string, in this example you may use the $index contextual property. We'll explore it in the next examples but here a preview:

example.ts

# @for, objects and signals

SWITCH LAYOUT

src/app.component.ts

This example is very similar to the previous one but with some differences:

we use signals to store an array
the array contains objects instead strings
the track property uses the product.id so we are sure that they are unique

Display the cost value next to the name

Click or in the editor to practice

# @for e @empty blocks

SWITCH LAYOUT

src/app.component.ts

In this example the @for display the list of items only when the Load button is clicked.

The `@empty` block

The @empty block displays its content when the array is empty ([], null, undefined)

How it works

The products signal contains an empty array
The @empty block shows the Load button (since the array is empty)
The signal array is populated when the button is clicked
The @for block display the items

Add a new Reset button to set the products array as empty ([]). So, when clicked, the Load button is shown again

Click or in the editor to practice

QUIZ

What functionality is used in conjunction with the @for block to determine the element key to use in order to reduce Angular's work in DOM updates?

trackBy
track
key
id

# @for and computed signals

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

@for block

Renders the content of a block repeatedly for each item of an iterable

6 snippets

16 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

The @for block in Angular iterates over each item in a given collection and renders the content of a block repeatedly for each item.

This collection can be any JavaScript iterable, such as an array, a set, or a map.

# Display list of items with `@for` block

SWITCH LAYOUT

src/app.component.ts

Add another item to the array

Click or in the editor to practice

The @for (item of items) block is used to iterate over an array and render each product in a list <li> item .

The track function is used to optimize the rendering process by helping Angular identify items in a collection.

track

Since the array may contains multiple items with the same string, in this example you may use the $index contextual property. We'll explore it in the next examples but here a preview:

example.ts

# @for, objects and signals

SWITCH LAYOUT

src/app.component.ts

This example is very similar to the previous one but with some differences:

we use signals to store an array
the array contains objects instead strings
the track property uses the product.id so we are sure that they are unique

Display the cost value next to the name

Click or in the editor to practice

# @for e @empty blocks

SWITCH LAYOUT

src/app.component.ts

In this example the @for display the list of items only when the Load button is clicked.

The `@empty` block

The @empty block displays its content when the array is empty ([], null, undefined)

How it works

The products signal contains an empty array
The @empty block shows the Load button (since the array is empty)
The signal array is populated when the button is clicked
The @for block display the items

Add a new Reset button to set the products array as empty ([]). So, when clicked, the Load button is shown again

Click or in the editor to practice

QUIZ

What functionality is used in conjunction with the @for block to determine the element key to use in order to reduce Angular's work in DOM updates?

trackBy
track
key
id

# @for and computed signals

SWITCH LAYOUT

src/app.component.ts

This snippet shows how to use computed signals to create derived states from the products signal (the array of items), for example to calculate the total of items or a boolean to know if the array is empty or not:

Computed Properties

noItems(): a boolean to know if the array is empty or not
totalItems(): the length of the array

How it works

The @for block iterates over the products array and tracks each item by its id.
<li>{{item.name}}</li> renders the name of each product in a list item.
@empty: displays a button if the products array is empty.
The <button>Load</button> invokes the load() method and populate the array
@if(!noItems()) conditionally renders its content if noItems is false (i.e., there are items in the products array).
{{products().length}} displays the total number of items using products().length.
{{totalItems()} works as the previous one but use a computed signal instead (this is the preferred way since is more optimized and efficient)

Create a new computed property to display the total cost in the template. TIP: you may use the array reduce function

Click or in the editor to practice

Angular Cookbook

Send your feedback

Angular Cookbook

# Display list of items with `@for` block

# @for, objects and signals

# @for e @empty blocks

How it works

QUIZ

# @for and computed signals

Send your feedback

# Display list of items with `@for` block

# @for, objects and signals

# @for e @empty blocks

How it works

QUIZ

# @for and computed signals

# Contextual Properties

# Simulate a TabBar

Computed Properties

How it works

Angular Cookbook

Send your feedback

Angular Cookbook

# Display list of items with @for block

# @for, objects and signals

# @for e @empty blocks

How it works

QUIZ

# @for and computed signals

Send your feedback

# Display list of items with @for block

# @for, objects and signals

# @for e @empty blocks

How it works

QUIZ

# @for and computed signals

# Contextual Properties

# Simulate a TabBar

Computed Properties

How it works

# Display list of items with `@for` block

# Display list of items with `@for` block