Here we look at what is ngFor in Angular template syntax, how to use ngFor in Angular 10 templates, and the index of ngFor elements.
In this post, we’ll see by examples how to use the ngFor
directive to iterate over arrays of data and even objects in Angular 10 templates.
What is ngFor in Angular Template Syntax?
Angular makes use of HTML for templates associated with components which eventually represent the views of your front-end application.
A component controls a part of your application user interface and the associated template is what gets rendered in that part of the UI.
Since HTML doesn’t have a built-in template language, Angular extends HTML with a powerful template syntax that includes many directives such as ngFor
which is similar to the typical for-loops in programming languages.
The ngFor
allows you to loop through an array of data directly in the HTML template. The array must be present in the associated component.
How to Use ngFor in Angular 10 Templates?
Let’s now see how to use the ngFor
directive by example.
Let’s suppose we have a movies component and we want to display the movies from an array in the template. Here is how:
import { Component } from '@angular/core';
@Component({
selector: 'app-movies-list',
template: `
<ul>
<li *ngFor="let movie of moviesArr">
</li>
</ul>
`
})
export class MoviesListComponent {
moviesArr: any[] = [
{
"title": "Super Man"
},
{
"title": "Spider Man"
},
{
"title": "Aladdin"
},
{
"title": "Downton Abbey"
}
];
}
The moviesArr
array is automatically available in the component’s template which is in our case an inline template.
We use the ngFor
directive to iterate over the array of movies and display the title of each movie.
The directive has the *ngFor="let movie of moviesArr"
syntax. After the let
keyword, we add a variable, which can be any valid variable name, that will be used to reference and access each element of the array and after the of
keyword, we add the array of data which must be present in the component.
We also need to prefix ngFor
with a *
before providing the iteration expression.
The Index of ngFor Elements
Suppose that we need to display the index of each element of the movies array.
Angular provides the reserved index
keyword inside the ngFor
expression which can be used as follows:
import { Component } from '@angular/core';
@Component({
selector: 'app-movies-list',
template: `
<ul>
<li *ngFor="let movie of moviesArr; let i = index">
-
</li>
</ul>
`
})
Inside the ngFor
expression, we defined another variable called i
which gets assigned the index
keyword which simply contains the current index of each element in each iteration. And we used interpolation to display the value of the i
and movie.title
variables.
Note: The index starts from 0 not 1.
Angular also provides the reserved first
and last
keywords for getting the first and last items in the array.
The ngFor trackBy
Angular provides the trackBy
feature which allows you to track elements when they are added or removed from the array for performance reasons.
We simply need to define a trackBy
method, which needs to identify each element uniquely, in the associated component and assign it to the ngFor
directive as follows:
import { Component } from '@angular/core';
@Component({
selector: 'app-movies-list',
template: `
<ul>
<li *ngFor="let movie of moviesArr; trackBy: trackByMethod">
</li>
</ul>
`
})
export class MoviesListComponent {
moviesArr: any[] = [
{
"id": 1,
"title": "Super Man"
},
{
"id": 2,
"title": "Spider Man"
},
{
"id": 3,
"title": "Aladdin"
},
{
"id": 4,
"title": "Downton Abbey"
}
];
trackByMethod(index:number, el:any): number {
return el.id;
}
}
We can simply identify each element in a unique way using its id
.
Conclusion
We can use the ngFor
directive to iterate over arrays of data right in the Angular’s component template.
We can use other features like index
, first
, last
and trackBy
to get the index of the current element, the first and last elements and for tracking the addition or removal of the array elements for performance reasons.