In this article we'll see how to use @for block in Angular with examples.
@for in Angular
The @for block in Angular is a built-in control flow syntax used to repeatedly loop and render content in a template for each item in an iterable.
@for control flow statement is added in Angular 17 and provides a cleaner syntax than using the ngFor directive in Angular.
Syntax of @for block
@for (item of items; track item.id) {
<!-- Content to repeat for each item -->
} @empty {
<!-- Optional content to display if the collection is empty -->
}
Here item variable is assigned the value of each item in the collection.
The 'items' represents the collection to be iterated over. This collection can be an array, a string, or anything that is iterable.
The value of the track expression should be a unique identifier for each item in the collection for example id property, or a value that uniquely identifies each item. Note that the track expression is required.
@empty: This is an optional block that renders its content only if the items collection is empty.
@for example in Angular
1. Looping a simple array of strings
fordemo.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-fordemo',
standalone: true,
imports: [],
templateUrl: './fordemo.component.html',
styleUrl: './fordemo.component.css'
})
export class FordemoComponent {
items = ['Ram', 'CPU', 'Mouse', 'Keyboard'];
}
fordemo.component.html
<ul>
@for(item of items; track item){
<li>{{item}}</li>
}
</ul>
Then import the component in the AppComponent
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FordemoComponent } from "./ControlFlow/fordemo/fordemo.component";
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FordemoComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'myApp';
}
And you are ready to use it in app.component.html
<app-fordemo />
That should give you the output as a list of items
• Ram • CPU • Mouse • Keyboard
2. Looping an array of objects
fordemo.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-fordemo',
standalone: true,
imports: [],
templateUrl: './fordemo.component.html',
styleUrl: './fordemo.component.css'
})
export class FordemoComponent {
products = [
{id:1, name:'Ram', price:45.67},
{id:2, name:'CPU', price:175.67},
{id:3, name:'Mouse', price:23},
{id:3, name:'Keyboard', price:50}
];
}
fordemo.component.html
<ul>
@for(product of products; track product.id){
<li>{{product.name}} {{product.price}}</li>
}
</ul>
As you can see now item.id is used as track expression, which should be unique for each item.
3. @for with $empty
<ul>
@for(item of items; track $index){
<li>{{item}}</li>
}@empty {
<li>There are no items.</li>
}
</ul>
In the ts file, if items array is empty
items = [];
then $empty block is rendered.
Why is track expression required
As already mentioned, the track expression is required, omitting it results in "@for loop must have a "track" expression" error.
Providing track expression is crucial for performance optimization. It helps Angular efficiently identify and update DOM elements when the underlying data changes, preventing unnecessary re-rendering of the entire list.
Track expression determines a key used to associate array items with the views in the DOM. Having that clear item identity allows Angular to execute a minimal set of DOM operations as items are added, removed or moved in a collection.
For example, if you are adding a new element to an array of length 100, Angular should be able to identify its id as a new id and just append that new element to the DOM, without having to re-render all the other elements.
Using $index as tracking mechanism
$index is one of the implicit variable available with @for, which provides the index of the current row. This $index can also be used as track expression.
<ul>
@for(item of items; track $index){
<li>{{item}}</li>
}
</ul>
track $index should only be preferred as tracking mechanism if collection which is iterated is static. For dynamic collections with frequent additions, deletions, or reordering, opt for a unique property of each item as the tracking key.
Contextual variables available with @for
Within the @for block, you can access several built-in contextual variables using a let expression, such as:
- $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
@for with $index example
Template code
@for(product of products; track product.id; let idx = $index){
<p>Product #{{ idx+1 }}: {{product.name}} {{product.price}}</p>
}
If you call it with the following array in .ts file
products = [
{id:1, name:'Ram', price:45.67},
{id:2, name:'CPU', price:175.67},
{id:3, name:'Mouse', price:23},
{id:3, name:'Keyboard', price:50}
];
Then the output is
Product #1: Ram 45.67 Product #2: CPU 175.67 Product #3: Mouse 23 Product #4: Keyboard 50 Note that index is zero based.
@for with $odd and $even example
If you want to render a table with odd and even rows in different colours then that can be done using the $odd or $even implicit variable.
fordemo.component.html
<h2>Product Details</h2>
<table border="1">
<tr>
<th>S. No</th>
<th>Id</th>
<th>Name</th>
<th>Price</th>
</tr>
@for(product of products; track product.id; let idx = $index; let odd = $odd){
<tr [class.bg]="!odd">
<td>{{idx+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
}
</table>
Note that, class binding in Angular is used here to bind CSS class. The variable odd returns true or false based on whether the row position is even or odd.
fordemo.component.css
.bg{
background-color: yellow;
}
fordemo.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-fordemo',
standalone: true,
imports: [],
templateUrl: './fordemo.component.html',
styleUrl: './fordemo.component.css'
})
export class FordemoComponent {
products = [
{id:1, name:'Ram', price:45.67},
{id:2, name:'CPU', price:175.67},
{id:3, name:'Mouse', price:23},
{id:3, name:'Keyboard', price:50}
];
}
That's all for this topic @for in Angular With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-