Angular ngFor directive

Suggested Videos
Part 13 - Style binding in angular 2 | Text | Slides
Part 14 - Angular2 event binding | Text | Slides
Part 15 - Two way data binding in angular 2 | Text | Slides

In Part 14 of Angular 2 tutorial we discussed ngIf structural directive which conditionally adds or removes DOM elements. In this video we will discuss another structural directive - ngFor in Angular. 



Let us understand ngFor structural directive with an example. Consider the following array of Employee objects.

employees: any[] = [

    {

        code: 'emp101', name: 'Tom', gender: 'Male',

        annualSalary: 5500, dateOfBirth: '25/6/1988'

    },

    {

        code: 'emp102', name: 'Alex', gender: 'Male',

        annualSalary: 5700.95, dateOfBirth: '9/6/1982'

    },

    {

        code: 'emp103', name: 'Mike', gender: 'Male',

        annualSalary: 5900, dateOfBirth: '12/8/1979'

    },

    {

        code: 'emp104', name: 'Mary', gender: 'Female',

        annualSalary: 6500.826, dateOfBirth: '14/10/1980'

    },

];

We want to display these employees in a table on a web page as shown below.


We will use the same project that we have been working with so far in this video series. 

Step 1 : Add a new TypeScript file to the "employee" folder. Name it employeeList.component.ts. Copy and paste the following code in it.

import { Component } from '@angular/core';

@Component({

    selector: 'list-employee',

    templateUrl: 'app/employee/employeeList.component.html',

    styleUrls: ['app/employee/employeeList.component.css']

})

export class EmployeeListComponent {

    employees: any[] = [

        {

            code: 'emp101', name: 'Tom', gender: 'Male',

            annualSalary: 5500, dateOfBirth: '25/6/1988'

        },

        {

            code: 'emp102', name: 'Alex', gender: 'Male',

            annualSalary: 5700.95, dateOfBirth: '9/6/1982'

        },

        {

            code: 'emp103', name: 'Mike', gender: 'Male',

            annualSalary: 5900, dateOfBirth: '12/8/1979'

        },

        {

            code: 'emp104', name: 'Mary', gender: 'Female',

            annualSalary: 6500.826, dateOfBirth: '14/10/1980'

        },

    ];

}

Step 2 : Add a new HTML page to the "employee" folder. Name it employeeList.component.html. Copy and paste the following code in it.

Please note :

• ngFor is usually used to display an array of items
• Since ngFor is a structural directive it is prefixed with *
• *ngFor='let employee of employees' - In this example 'employee' is called template input variable, which can be accessed by the <tr> element and any of it's child elements.
• ngIf structural directive displays the row "No employees to display" when employees property does not exist or when there are ZERO employees in the array.

<table>

    <thead>

        <tr>

            <th>Code</th>

            <th>Name</th>

            <th>Gender</th>

            <th>Annual Salary</th>

            <th>Date of Birth</th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor='let employee of employees'>

            <td>{{employee.code}}</td>

            <td>{{employee.name}}</td>

            <td>{{employee.gender}}</td>

            <td>{{employee.annualSalary}}</td>

            <td>{{employee.dateOfBirth}}</td>

        </tr>

        <tr *ngIf="!employees || employees.length==0">

            <td colspan="5">

                No employees to display

            </td>

        </tr>

    </tbody>

</table>

Step 3 :  Add a new StyleSheet to the "employee" folder. Name it employeeList.component.css. Copy and paste the following code in it.

table {

    color: #369;

    font-family: Arial, Helvetica, sans-serif;

    font-size: large;

    border-collapse: collapse;

}

td {

    border: 1px solid #369;

    padding:5px;

}

th{

    border: 1px solid #369;

    padding:5px;

}

Step 4 : In the root module, i.e app.module.ts, import employeeList component and add it to the declarations array as shown below.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { EmployeeComponent } from './employee/employee.component';

import { EmployeeListComponent } from './employee/employeeList.component';

@NgModule({

    imports: [BrowserModule],

    declarations: [AppComponent, EmployeeComponent, EmployeeListComponent],

    bootstrap: [AppComponent]

})

export class AppModule { }

Step 5 : In the root component, i.e app.component.ts use employeeList component as a directive as shown below.

import { Component } from '@angular/core';

@Component({

    selector: 'my-app',

    template: `<list-employee></list-employee>`

})

export class AppComponent { }

At this point, run the application and notice the employees are displayed in the table as expected.