The “track by” expression to specify
unique keys. The “track by” takes a
function that has two arguments: index and item. If “track by” is given,
Angular tracks changes by the return value of the function.
Understanding About *ngFor Mechanisms:-
By default, when you use *ngFor
without “track by”, *ngFor tracks array of objects changing through object
identity.
If you are going to modify (add,
update, remove) any element of *ngFor, then update the tracking algorithm by
providing your object id to the “track by”function.”
Why use “track by”with ngFor directive?
The “ngFor” directive may perform
poorly with large lists.
A small change to the list like,
adding a new item or removing an existing item may trigger several DOM
manipulations.
Syntax of ngFor Angular:
<tr *ngFor="let user of users; let i = index">
<td>{{user.name}}</td>
<td>{{i}}</td>
</tr>
Example of *ngFor with trackBy in Angular:
<div *ngFor="let user of users; trackBy: user.id">
{{user.id}} - {{user.name}}
</div>
As an example - AngularJs track by,
<div ng-repeat="user in user.userList track by user.UserId">
{{user.name}}
</div>
Here UserId is unique id and the name
of user can be same. So use “track by user.UserId” for ignores error.
Note
- Angular does not allow duplicates in ng-repeat directive. So I got an error -
ngRepeat:dupes.