In the previous article, we’ve learned two-way data using the ngModel directive. In this article, we’re going to learn about the ngFor directive and its working.
Index
What is Angular ngFor Directive?
ngFor is basically a built-in template directive used to iterate something like an object or array and display it into the View. Of course, we know that HTML is not a programming language, but analogically, this makes HTML a programming language and makes developer’s work easy.
Let’s see the syntax of the ngFor directive, and it’s working:
<ul *ngFor="let student of students">
<li>Name: {{student.name}}</li>
<li>Age: {{student.age}}</li>
<li>Gender: {{student.gender}}</li>
</ul>- First, let the student is the local variable created.
- Here, students are an array of objects that we created in the ts file, containing the student details.
Example
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-app';
students=[
{
name:"Rahul",
age:20,
gender:"Male"
},
{
name:"Aman",
age:21,
gender:"Male"
},
{
name:"Esha",
age:19,
gender:"Female"
},
{
name:"Anisha",
age:20,
gender:"Female"
},
]
}Output:
There are many more local variables available that can be set.
Sometimes we want to access the index of elements in the array. We can do that by using an index variable.
Syntax
<ul *ngFor="let student of students, index as i">
<li>{{i}}--{{student.name}}</li>
</ul>Here, i is the local variable like a student that we had created earlier.
Let’s now display the name with its corresponding index:
Likewise, we have four more variables: first, last, odd, even. The syntax is pretty much the same as the index.
Let’s see the syntax of each of them:
Odd Variable in ngFor Loop
The odd variable returns true if the index is odd; else returns false.
<ul *ngFor="let student of students, odd as o">
<li>{{o}}--{{student.name}}</li>
</ul>Output:
Even Variable in ngFor Loop
The even variable returns true if the index is even; else returns false.
<ul *ngFor="let student of students, even as e">
<li>{{e}}--{{student.name}}</li>
</ul>Output:
First Variable in ngFor Loop
The first variable returns true for the first index only.
<ul *ngFor="let student of students, first as f">
<li>{{f}}--{{student.name}}</li>
</ul>Output:
Last Variable in ngFor Loop
The last variable returns true for the last index only.
<ul *ngFor="let student of students, last as l">
<li>{{l}}--{{student.name}}</li>
</ul>Output:
Conclusion
We hope this article will clear all your concepts on ngFor directive and its use. In the later articles, we’ll see some more directives of Angular such as ngSwitch and ngIf.
Read Next: Angular ngIf Directive
