Angular ngFor Directive

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.

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:

angular ngfor example

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:

angular ngfor example 2

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:

angular ngfor odd variable example

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:

angular ngfor even variable example

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:

angular ngfor first variable example

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:

angular ngfor last variable example

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

Leave a Reply

Your email address will not be published. Required fields are marked *