*ngFor for list rendering in Angular - Performance & Optimization

Performance: *ngFor for list rendering

MEDIUM IMPACT

*ngFor affects how many DOM elements are created and updated, impacting rendering speed and responsiveness when displaying lists.

Rendering a dynamic list of items efficiently

Angular

<div *ngFor="let item of items; trackBy: trackById">{{item.name}}</div>

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

trackBy lets Angular identify items uniquely, so only changed items update in the DOM, reducing reflows.

📈 Performance GainSingle reflow and repaint for changed items only, not the entire list

Rendering a dynamic list of items efficiently

Angular

<div *ngFor="let item of items">{{item.name}}</div>

Without trackBy, Angular recreates all DOM elements on any list change, causing many reflows and repaints.

📉 Performance CostTriggers N reflows and repaints on each update where N is the list length

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
*ngFor without trackBy	Destroys and recreates all nodes on list change	N reflows for N items	High paint cost due to full redraw	[X] Bad
*ngFor with trackBy	Reuses existing nodes, updates only changed items	Single or minimal reflows	Low paint cost, partial redraw	[OK] Good

Rendering Pipeline

*ngFor creates DOM nodes for each list item. Without trackBy, Angular destroys and recreates nodes on any list change, causing layout recalculations and paint. With trackBy, Angular reuses nodes, minimizing layout thrashing.

→DOM Creation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to full DOM node recreation without trackBy

Core Web Vital Affected

INP

*ngFor affects how many DOM elements are created and updated, impacting rendering speed and responsiveness when displaying lists.

Optimization Tips

1Always use trackBy with *ngFor to uniquely identify list items.

2Avoid changing the list reference unnecessarily to prevent full re-renders.

3Keep list item templates simple to reduce paint cost.

Performance Quiz - 3 Questions

What is the main performance problem when using *ngFor without trackBy on a large list?

A Angular skips rendering the list entirely.

B Angular caches all DOM nodes and never updates the list.

C Angular recreates all DOM nodes on any list change causing many reflows.

D Angular only updates the first item in the list.

DevTools: Performance

How to check: Record a performance profile while updating the list. Look for long Layout and Recalculate Style tasks.

What to look for: Excessive Layout events and long scripting times indicate missing trackBy causing full DOM rebuilds.