Angular 2 [PART-7 ] ngFor directive (ngFor)

Angular ngFor directive (ngFor)

ngFor is used to display list of data , in employee App list employee by using ngFor its same as for loop is JavaScript PHP JAVA programming language.

Example from application listemployee.component.ts

<tr *ngFor="let employee of employees">
<td> <a (click)='updateEmployeeDetails(employee);'>{{employee.code}}</a></td>

Angular ngFor trackBy
track by used for undrestand any changes in ngFor loop with a Specific value
so that need to update only if change is exist , so performance will be increase

<tr *ngFor="let employee of employees;trackBy:trackByEmpCode" >

Add function  in listemployee.component.ts

trackByEmpCode(index:number ,employee:any):String{
return employee.code;


In this example system track employee code , so that if refresh employee list first check whether any employee other than listed employee  then populate only new employee .  also if any employee not in list remove specific employee so that total app performance will be much better than normal ngFor

Posts created 26

One thought on “Angular 2 [PART-7 ] ngFor directive (ngFor)

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
Optimized with PageSpeed Ninja