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>
<td>{{employee.firstName}}{{employee.lastName}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.dateofbirth}}</td>
<td>{{employee.salary}}</td>
</tr>

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
Ex:

<tr *ngFor="let employee of employees;trackBy:trackByEmpCode" >
<td>{{employee.code}}</td>
</tr>

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