0
Jump into concepts and practice - no test required
Recommended
items = [{id:1, name:'A'}, {id:2, name:'B'}];
trackById(index, item) {
return item.id;
}
// In template:
// *ngFor="let item of items; trackBy: trackById"| Step | Action | Old List | New List | TrackBy Key Used | Items Updated | Rendered Output |
|---|---|---|---|---|---|---|
| 1 | Initial render | [] | [{id:1,name:'A'},{id:2,name:'B'}] | N/A | All items | A, B |
| 2 | Update list with new object but same ids | [{id:1,name:'A'},{id:2,name:'B'}] | [{id:1,name:'A1'},{id:2,name:'B'}] | id | Only item with id=1 | A1, B |
| 3 | Update list with new item added | [{id:1,name:'A1'},{id:2,name:'B'}] | [{id:1,name:'A1'},{id:2,name:'B'},{id:3,name:'C'}] | id | New item with id=3 | A1, B, C |
| 4 | Remove item with id=2 | [{id:1,name:'A1'},{id:2,name:'B'},{id:3,name:'C'}] | [{id:1,name:'A1'},{id:3,name:'C'}] | id | Removed item with id=2 | A1, C |
| 5 | Update list with same objects but different order | [{id:1,name:'A1'},{id:3,name:'C'}] | [{id:3,name:'C'},{id:1,name:'A1'}] | id | No items updated, only order changed | C, A1 |
| 6 | Update list with new objects without trackBy | [{id:3,name:'C'},{id:1,name:'A1'}] | [{id:3,name:'C'},{id:1,name:'A1'}] | No trackBy | All items re-rendered | C, A1 |
| Variable | Start | After 1 | After 2 | After 3 | After 4 | After 5 | After 6 |
|---|---|---|---|---|---|---|---|
| items | [] | [{id:1,name:'A'},{id:2,name:'B'}] | [{id:1,name:'A1'},{id:2,name:'B'}] | [{id:1,name:'A1'},{id:2,name:'B'},{id:3,name:'C'}] | [{id:1,name:'A1'},{id:3,name:'C'}] | [{id:3,name:'C'},{id:1,name:'A1'}] | [{id:3,name:'C'},{id:1,name:'A1'}] |
| trackByKey | N/A | [1,2] | [1,2] | [1,2,3] | [1,3] | [3,1] | N/A |
TrackBy in ngFor: - Use trackBy to give each item a unique key. - Angular uses this key to track items efficiently. - Without trackBy, Angular re-renders all items on change. - TrackBy improves performance by updating only changed items. - Syntax: *ngFor="let item of items; trackBy: trackByFn"
trackBy in an ngFor directive in Angular?ngFor doesngFor repeats a template for each item in a list, rendering them in the view.trackBytrackBy helps Angular know which items changed by uniquely identifying them, so it only updates those items instead of re-rendering the whole list.trackBy in an ngFor loop?ngFor syntax with trackBytrackBy followed by the function name without parentheses.*ngFor="let item of items; trackBy: trackByFn" matches the correct syntax: *ngFor="let item of items; trackBy: trackByFn". Others either miss the keyword or use parentheses incorrectly.items array is updated by adding a new item?items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
trackByFn(index: number, item: any) {
return item.id;
}<div *ngFor="let item of items; trackBy: trackByFn">{{item.name}}</div>trackByFn returns the unique id of each item, so Angular can track items by their IDs.trackByFn to detect only the new item and renders just that one, not the entire list.trackBy function used in an ngFor loop:trackByFn(index: number, item: any) {
return index + 1;
}index + 1, which changes if the list order changes or items are added/removed.trackBy. Which trackBy function below correctly handles this scenario to avoid unnecessary re-renders when the list updates?user.name is not reliable. The unique user.id is the best choice.user.name (not unique), B uses user.id (stable and unique), C uses index (unstable), D returns the whole user object (not recommended).