Angular 8 ngFor Directive

The *ngFor directive is used to repeat to repeat a portion of HTML template once per each item from an iterable list (collection). The ngFor is an Angular structural directive and is similar to ngRepeat in AngularJS. Some local variables like Index, First, Last, odd and even are exported by *ngFor directive.

Syntax of ngFor

Angular 8 ngFor Directive

How to use ngFor Directive?

To use ngFor Directive, we have to create a block of HTML elements, which can display a single item of the items collection. After that, we can use the ngFor Directive to tell angular to repeat that block of HTML elements for each item in the list.

The ngFor Directive has a different syntax from other directives we’ve seen. If we familiar with the ngFor statement, we will notice that they are identical.

Angular 8 ngFor Directive Syntax

Example for *ngFor Directive

Firstly, we have to create angular Application. After that, open the app.component.ts and add the following code.

The following code contains a list of Top 3 movies in a movies array. Let’s build a template to display these movies in a tabular form.

Now, open the app.component.html and add the following code:

When we run the applications, it will show the movies in tabular form.

Pin It on Pinterest

Share This