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:

Output:

Example 2:

Output:

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