Angular10 NgFor Directive

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:

<li *ngFor='condition'></li>

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

<ul>
  <li *ngFor='let i of a'> {{i}} </li>
</ul>

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

<ol>
    <li *ngFor='let i of a'> {{i}} </li>
</ol>

Output:

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