Skip to content
Related Articles

Related Articles

Improve Article

Angular10 NgFor Directive

  • Last Updated : 03 Jun, 2021
Geek Week

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :