There occurs some situation when there are large number of records, binding with the *ngFor in the DOM.
If the data changes, angular, rebinds all the records again and again causing performance issue.
How can we increase the performance?
Answer is, use the trackBy with *ngFor.
By default in *ngFor directive, DOM changes are tracked by the object identity.
This is good for normal binding with a few records of data, but with the introduction of immutable practices and Redux, we get new objects every time.
This means that every time *ngFor will render the list in DOM, whereas the DOM operations are expensive in respect of performance.
Here we use trackBy with *ngFor and tells it that, the record is uniquely tracked by the particular property or index of record.
<div *ngFor="let post of posts; trackBy: trackByFn"></div>
return item.id; //index can also be returned
Doing this , will rebind the only record in DOM , which have been changed , as it will keep track by the given property value.
Thus the performance will be increased.