Angular10 NgFor Directive (original) (raw)

Last Updated : 23 Jul, 2025

In this article, we are going to see what is NgFor in Angular 10 and how to use it.

NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page.

Syntax:

NgModule: Module used by NgForOf is:

• CommonModule

Selectors:

• [ngFor]

Approach:

• Create the angular app to be used
• There is no need for any import for the NgFor to be used
• In app.component.ts define the array to be used with ngFor directive.
• In app.component.html use NgFor directive with list element to display array elements.
• serve the angular app using ng serve to see the output

Example 1:

app.component.ts `

import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { a=['gfg1', 'gfg2', 'gfg3', 'gfg4'] }

app.component.html

• {{i}}

`

Output:

Example 2:

app.component.ts `

import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { a=['gfg1', 'gfg2', 'gfg3', 'gfg4'] }

app.component.html

1. {{i}}

`

Output:

Reference: https://v17.angular.io/api/common/NgForOf