Learn Angular *ngFor Directive

Introduction

*ngFor is a structural and built-in directive that is used to iterate over collections like an array and create a template for each item.

What is Structural Directive?

A structural directive adds and removes elements in the DOM tree. Here, *ngFor does the same.

Basic Syntax of ngFor

<tr *ngFor="let s of students">
   <td>{{s.Name}}</td>
</tr>

Example

Let’s take an example and understand this with the help of it - Suppose we have list of student objects with some of their information, like StudentID, Name, DOB, StuClass, Gender, Age & Address.

[
   { studentID: 1, studentName: 'Steve', gender: 'Male', age: 35, course: 'MCA' },
   { studentID: 2, studentName: 'Bobby', gender: 'Male', age: 32, course: 'MBA' },
   { studentID: 3, studentName: 'Rina', gender: 'Female', age: 45, course: 'B.Tech' },
   { studentID: 4, studentName: 'Alex', gender: 'Female', age: 24, course: 'M.Tech' },
]

And, we want to have this data in HTML table format, like below.

This is how we can do using ngFor directive introduced in Angular 2.

Let’s look at it via code.

Step 1

Let’s create a folder named Student under src/app folder.



Add a TypeScript file named student.component.ts under this folder and add the below code into it.

import {Component} from '@angular/core'

@Component({
    selector: 'list-student',
    templateUrl: 'app/student/student.component.html',
    styles: [
                `
                    td {
                            border: 1px solid black;
                            padding:4px;
                    }
                    th {
                        border: 1px solid black;
                        padding:4px;
                    }
                `
            ]
})
export class StudentListComponent {
    students: any[] =
 [
   { studentID: 1, studentName: 'Steve', gender: 'Male', age: 35, course: 'MCA' },
   { studentID: 2, studentName: 'Bobby', gender: 'Male', age: 32, course: 'MBA' },
   { studentID: 3, studentName: 'Rina', gender: 'Female', age: 45, course: 'B.Tech' },
   { studentID: 4, studentName: 'Alex', gender: 'Female', age: 24, course: 'M.Tech' },
 ];
}

For making the class named StudentistComponent an Angular component, I decorated it with component decorator by importing component from Angular core.

templateUrl 

For using view of this component, I used templateUrl property to assign an external HTML file.

Styles 

For applying CSS styling over table output, I included some style code under styles property. We can use also styleUrls property in case we want to use some external CSS file for styling.

Let’s try to understand some common things using below image,



Step 2

Let’s add a view file named student.component.html under student folder,



And add the below HTML code into this this file,

<table>
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Course</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let s of students">
            <td>{{s.studentID}}</td>
            <td>{{s.studentName}}</td>
            <td>{{s.gender}}</td>
            <td>{{s.age}}</td>
            <td>{{s.course}}</td>
        </tr>
    </tbody>
</table>

*ngFor

It’s a built-in directive that is used to iterate over student list and add student item in the DOM tree.

Step 3

Under app folder, open app.component.ts file and add the list-student directive as view, 

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

@Component({
  selector: 'my-app',
  template: `<list-student></list-student>`,
})
export class AppComponent {
    name = 'Angular2 Student Demo';
}

Step 4

Under the same app folder, open app.module.ts file and import the student component as well as add your component under declarations like below,

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

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

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, StudentListComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 5

Now, our application is ready to show the expected output. Let’s run our project using F5 and see the output in browser.



Note

To setup Angular2 project in your Visual Studio, download the "Quick Start Project" from the given link and use the contents from downloaded folder into your project.

Write me in comment box in case you want some help in setting up Angular 2 into your Visual Studio.