0 day streak
javascript / beginner
Snippet

Performance Tuning with trackBy

When rendering lists, the trackBy function helps Angular identify which items have actually changed, avoiding expensive DOM re-renders.

snippet.js
javascript
1
2
3
4
5
6
7
export class ListComponent {
items = [{ id: 101, name: 'Apple' }, { id: 102, name: 'Banana' }];
trackById(index: number, item: any): number {
return item.id;
}
}
angular
Breakdown
1
trackById(index, item)
Receives the current item's index and the item object itself.
2
return item.id;
Returns a unique identifier so Angular can track this specific element.