Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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.
Angular ngFor directive

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.

Angular 2 tutorial for beginners

5 comments:

  1. Hi sir,
    This is sadiq.i follow your videos.but i'm doing some mistake.i don't know where it is going.i'm getting output 'app/Employee/EmployeeList.Component.html' instead of employeeList

    ReplyDelete
  2. please check if you are using templateURL or template? template refers to html content which you have written while templateURL is any html with the given path

    ReplyDelete
  3. Please Use templateUrl:'../Employee/EmployeeList.Component.html' instead of 'app/Employee/EmployeeList.Component.html'

    ReplyDelete
  4. Hi Venkat,
    I did't find any tutorial for ngIf in this as you mentioned above that "as we discussed in part 14 of angular 2 tutorial"

    ReplyDelete
    Replies
    1. Hi Krishna,

      It's actually in Part 13 of Angular CRUD tutorial.
      Angular CRUD

      Delete

It would be great if you can help share these free resources