*ngFor in angular 2

 In angular 2 by using the *ngFor we can create the template(nothing but the elements or HTML tags ) building based on the collection count dynamically.

In simple, I can say the repetition of the template creation can be done by using the *ngFor.

Syntax:

<tagname *ngFor="let x of arrayofobject/array">

{{x.property/x}}

</tagname>

By using the ngFor we can do the repetition for both the array and the collection of the array of the
objects.

Implementing the *ngFor over the array :

The following is my application folder structure

In app.compponent.ts :

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

department=['Architect','Developer','Tester'] 

}

In my app.component.ts file, I had just created a variable of type array named as “department”.

In app.component.html :

<div >

  <ul *ngFor='let x of department'>

<li>{{x}}</li>

  </ul>

</div>

In my above code if we observe, I had implemented the *ngFor in the <ul> tag.

Based on the department array count number, the <li> tag will be creating repeatedly.

The scope of the variable ‘x’ will be only within the start and end tags of the *ngFor implementation itself. we cant access the ‘x’ value outside the ngFor implemented tag.

Result :

Implementing the *ngFor over the array of object :

 app.compponent.ts :

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

 employees = [

                                {id:1, Ename:"Rvi", dname : 'Architect'},

                                { id: 2, Ename: "Kiran", dname : 'Developer' },

                                { id: 3, Ename: "Harish", dname : 'Developer' },

                                { id: 4, Ename: "Ramu", dname : 'Tester' },

                                { id: 5, Ename: "Giri", dname : 'Tester' },

                                { id: 6, Ename: "Raghu", dname : 'Developer' },

                                { id: 7, Ename: "Karthik", dname : 'Tester'},

                                { id: 8, Ename: "Venkat", dname : 'Tester' },

                                { id: 9, Ename: "Ankit", dname :'Architect' },

                            ];

}

app.component.html :

  <table border='1'>

    <thead>

      <tr>

      <td>ID</td>

      <td>Name</td>

      <td>Department</td>

      </tr>

    </thead>

    <tbody>

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

        <td>{{obj.id}}</td>

        <td>{{obj.Ename}}</td>

        <td>{{obj.dname}}</td>

      </tr>

    </tbody>

  </table>

Result :

To get the index of repletion :

We can also get the index value of the repletion over the collection just by equalizing the new variable to the keyword ‘index’.

<div *ngFor='let x of department let i=index'>
  <span >
 {{i+1}} - {{x}}
  </span><br/>
</div>

The above code repeats the div tag. Within the ngFor,we had provided the variable “i” which is assigned to index. Here we can access the index value from the variable "i" which rewults the following result.

Result :