Angular NgFor is a structural directive that renders the template for each item in the collection. The ngForOf is generally used in the shorthand form *ngFor. The core directive ngFor allows us to build data presentation lists and tables in our HTML templates. When we need to  display data in Angular, we use the ngFor directive.

Angular NgFor Example

NgFor is an inbuilt template directive that makes it easy to iterate over something like an array or an object and create a template for each item. You can also set local variables for the following exported values: index, first, last, even, and odd. the index will return the current loop index and the other values by providing a boolean indicating if the value is true or false.

Let’s see the Syntax of the** NgFor directive.**

<ng-template *ngFor="let item of items; index as i; trackBy: trackByFn">...</ng-template>

Let’s take an example of the ngFor directive in Angular.

#angular #angular 9 #angular ngfor