ngFor in Angular

What is ngFor?

ngFor in Angular is a structural directive that is used to iterate through each item in a list. The directives are the classes that are used to manipulate the DOM. To repeat a portion of the HTML template, we use ngFor. This directive binds the collection of elements to an HTML element. Then display in a list. Moving forward, let’s discuss the syntax of ngFor in Angular.

Syntax of ngFor in Angular

The syntax of ngFor in Angular is as follows:

To iterate through array elements and create a list of elements from this array, we use ngFor directive with the li tag. The li tag is used to define list items. For example, 

<li *ngFor = ‘condition’ > </li>

Moving forward, let’s discuss how we can use ngFor in our web applications.

Also see,  Install Homebrew

How to Use ngFor in Angular?

To use ngFor in Angular, the below points must be kept in mind: 

• First, we need to create a block of HTML elements that are used in displaying items of the collection list. We do this inside the app.component.ts file.

• We use the ngfor directive to ensure which block of HTML elements has to be repeated for each item in the list. We do this inside the app.component.html file.

Where to Use ngFor in Angular?

We can use ngFor in various cases. A few of them are

1. ngFor is capable of binding data, which is useful in creating dynamic and interactive user interfaces.
2. The ngFor is also used in creating tables. It iterates over elements of the array and creates rows and columns of the table.
3. It is also used to create dynamic forms. It iterates over elements of the array and creates input fields, checkboxes, and many more fields.

Similarly, you can create navigation menus, card layouts, and many more functionalities using ngFor in Angular very easily. 

The ngFor directive in Angular is a powerful tool for generating dynamic content based on collections of data. It allows developers to iterate over arrays or other iterable objects and create templates for each item. 

With the help of ngFor, we can easily create dynamic and interactive user interfaces that adapt to changing data. ngFor enables Angular developers to efficiently handle data-based cases and enhance the overall user experience.

Advanced Cases of NgFor

There are many advanced cases of ngFor directive in Angular. A few of them are

• The ngFor directive can be used with the built-in pipe in order to sort and filter the data.
• This directive helps in grouping data by category or date.
• This directive also allows pagination, which can be achieved by using a slice pipe. This helps in displaying a certain number of items per page.

Features of ngFor in Angular

There are many features of ngFor. A few of them are:

• Items from the large collection can be tracked easily based on unique identifiers using trackBy function.
• We can use an index variable to access the current index. This is useful in displaying list items with serial numbers or creating element ids uniquely.
• We can create nested ngFor directives to iterate through the nested lists.
• We can assign a local variable to the current iteration of the loop using as keyword. This helps in accessing the properties of the current index in the template.

Example of ngFor

Let’s implement a program to understand ngFor in Angular more clearly. Let’s suppose we are making an angular application that displays the ninjas name and their preferred coding languages. 

Implementation 1

You can directly paste this code inside the export class AppComponent in the app.component.ts file.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ninjas = [
    {
      id: 101,
      ninjaName: 'Ninja-1',
      language: 'Java',
    },
    {
      id: 102,
      ninjaName: 'Ninja-2',
      language: 'C++',
    },
    {
      id: 103,
      ninjaName: 'Ninja-3',
      language: 'Python',
    },
    {
      id: 104,
      ninjaName: 'Ninja-4',
      language: 'Java',
    },
    {
      id: 105,
      ninjaName: 'Ninja-5',
      language: 'Python',
    },
  ];
}

See the below image for your reference.

Similarly, paste the below code inside app.component.html.

Implementation 2

<h1>Hello Ninjas!</h1>

<h3>Ninjas name and their preferred coding language.</h3>

<ol>
  <li *ngFor="let item of ninjas">
    {{ item.ninjaName }} with id {{ item.id }} codes in
    {{ item.language }} language.
  </li>
</ol>

See the below image for your reference.

Output

Explanation

In the above code, we have made an object array named ninjas inside the export class AppComponent in the app.component.ts file. Then, inside the app.component.html file, we used the ngFor directive to fetch the items.

Frequently Asked Questions

What is the use of ngFor in Angular?

The ngFor in Angular is a structural directive that is used to iterate through each item in a list. 

How can we make dynamic forms using ngFor?

We can use ngFor to create dynamic forms. It iterates over elements of the array and creates input fields, checkboxes, and many more fields.

What is the syntax for ngFor?

The syntax for ngFor is <li *ngFor = ‘condition’ > </li>.

Where we use ngFor directive?

We use the ngfor directive to inform angular which block of HTML elements has to be repeated for each item in the list. We do this inside the app.component.html file.

Conclusion

Understanding ngFor is crucial for creating dynamic and interactive user interfaces in Angular. In this article, we have discussed about ngFor in Angular and its syntax. We have discussed where and how we can use this. We have talked about its advanced cases and features. In the end, we have discussed an example of ngFor in angular. 

Recommended Article

• Basics of Angular
• React vs Angular
• AngularJs

We hope this article helped you understand about ngFor in Angular. You can read more such articles on our platform, Code360. You will find articles on almost every topic on our platform. For interview preparations, you can read the Interview Experiences of popular companies.