Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Angular?
3.
What is ngFor?
4.
Syntax of ngFor in Angular
5.
How to Use ngFor in Angular
6.
Where to Use ngFor in Angular
7.
Advanced Cases of NgFor
8.
Features of ngFor in Angular
9.
Example of ngFor
9.1.
Implementation 1
9.2.
Implementation 2
10.
Frequently Asked Questions
10.1.
What is the use of ngFor in Angular?
10.2.
How can we make dynamic forms using ngFor?
10.3.
What is the syntax for ngFor?
10.4.
Where we use ngFor directive?
11.
Conclusion
Last Updated: Mar 27, 2024
Easy

ngFor in Angular

Crack Google SDE interview : Essential projects
Speaker
Saurav Prateek
SDE-2 @
20 Jun, 2024 @ 01:30 PM

Introduction

Do you know how we can repeat a portion of the HTML template using Angular? Do you know about various advanced cases and features of Angular? If not, then don’t worry. We will clear all your doubts.                   

ngFor in angular

In this article, we will discuss about ngFor in Angular and its syntax. We will discuss where and how we can use this. We will talk about its advanced cases and features. In the end, we will also discuss an example of ngFor in angular. Moving forward, let’s first discuss about Angular.

Read About, Interpolation in Angular

What is Angular?

Angular is an open-source web application framework. It is a TypeScript based language. Typescript is a superset of Javascript. Angular is component-based architecture. It helps in creating single-page applications.                                  

Angular supports two-way data binding. This means that there is a bi-directional data flow. The data is shared between the component(.ts file) and the template(.html file). If there is any change at one place, then it will automatically be reflected at another end.

Click on the following link to read further : Hackerearth Test Questions and Answers

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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.
Pointing 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.
Pointing 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.

app.component.ts file

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.

implementation

Output

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

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. To learn more about Angular, you can check out our other articles:

We hope this article helped you in understanding about ngFor in Angular. You can read more such articles on our platform, Coding Ninjas Studio. You will find articles on almost every topic on our platform. Also, you can practice coding questions at Coding Ninjas to crack good product-based companies. For interview preparations, you can read the Interview Experiences of popular companies.       

Happy Coding!  

Previous article
Difference between While and Do While Loops
Next article
What is Interpolation in AngularJS?
Live masterclass