TrackBy in ngFor in Angular - Step-by-Step Execution

Concept Flow - TrackBy in ngFor

Start ngFor loop

↓

Render list items

↓

Detect changes in list

↓

Use TrackBy function?

No→Re-render all items

Yes↓

Compare items by TrackBy key

↓

Update only changed items

↓

Render updated list

This flow shows how Angular's ngFor uses TrackBy to optimize rendering by tracking items with a unique key, updating only changed items.

Execution Sample

Angular

items = [{id:1, name:'A'}, {id:2, name:'B'}];

trackById(index, item) {
  return item.id;
}

// In template:
// *ngFor="let item of items; trackBy: trackById"

This code loops over items and uses trackById to identify each item by its unique id.

Execution Table

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

💡 Rendering stops after list updates and Angular applies trackBy to optimize DOM updates.

Variable Tracker

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

Key Moments - 3 Insights

Why does Angular re-render all items if trackBy is not used?

Without trackBy, Angular compares items by object reference, so new objects cause full re-render (see step 6 in execution_table).

How does trackBy help when item order changes but items are the same?

TrackBy uses unique keys to detect same items despite order change, so Angular only updates order without re-rendering items (see step 5).

What happens if trackBy returns a non-unique key?

Angular may confuse items and update wrong elements, causing rendering bugs. Keys must be unique (implied in execution_table keys).

Visual Quiz - 3 Questions

Look at the execution table, at which step does Angular update only one item instead of all?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Check the 'Items Updated' column for step 2 and step 6.

According to variable_tracker, what is the trackByKey after step 3?

A [1,2]

B [1,3]

C [1,2,3]

D [3,1]

💡 Hint

Look at the 'trackByKey' row under 'After 3' column.

If trackBy was removed, what would happen at step 6 according to the execution table?

A All items re-rendered

B No items update

C Only new items update

D Only order changes

💡 Hint

See the 'Items Updated' and 'TrackBy Key Used' columns at step 6.

Concept Snapshot

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"

Full Transcript

TrackBy in Angular's ngFor helps Angular identify list items uniquely during rendering. When the list changes, Angular uses the trackBy function to compare items by their unique keys instead of object references. This allows Angular to update only the changed items in the DOM, improving performance. Without trackBy, Angular re-renders all items whenever the list changes, even if only one item changed. The execution table shows how Angular updates items step-by-step using trackBy keys. The variable tracker shows how the list and keys change over time. Key moments clarify why trackBy is important and how it handles item order changes. The visual quiz tests understanding of these concepts by referencing the execution visuals.