Angular 8 *ngFor Directive

The *ngFor directive is used 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

See the simplified syntax for the ngFor directive:

How to use ngFor Directive?

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

Example for *ngFor Directive

First, you have to create an 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.

import { Component } from '@angular/core';
@Component({
    selector: 'movie-app',
    templateUrl:'./app/app.component.html',
    styleUrls:['./app/app.component.css']
})
export class AppComponent 
{ 
    title: string ="Top 10 Movies" ;
    movies: Movie[] =[
        {title:'Zootopia',director:'Byron Howard, Rich Moore',cast:'Idris Elba, Ginnifer Goodwin, Jason Bateman',releaseDate:'March 4, 2016'},
        {title:'Batman v Superman: Dawn of Justice',director:'Zack Snyder',cast:'Ben Affleck, Henry Cavill, Amy Adams',releaseDate:'March 25, 2016'},
        {title:'Captain America: Civil War',director:'Anthony Russo, Joe Russo',cast:'Scarlett Johansson, Elizabeth Olsen, Chris Evans',releaseDate:'May 6, 2016'},
        {title:'X-Men: Apocalypse',director:'Bryan Singer',cast:'Jennifer Lawrence, Olivia Munn, Oscar Isaac',releaseDate:'May 27, 2016'},
    ]
} 
class Movie {
    title : string;
    director : string;
    cast : string;
    releaseDate : string;
}

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

<div class='panel panel-primary'>
    <div class='panel-heading'>
        {{title}}
    </div> 
    <div class='panel-body'>
        <div class='table-responsive'>
            <table class='table'>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Director</th>
                        <th>Cast</th>
                        <th>Release Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let movie of movies;">
                        <td>{{movie.title}}</td>
                        <td>{{movie.director}}</td>
                        <td>{{movie.cast}}</td>
                        <td>{{movie.releaseDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

When you run the application, It will show the movies in tabular form.

Next TopicAngular 8 ngSwitch Directive

← prev next →