angular-scan demo

Watch the overlay flash as components re-render. Yellow = render, Red = unnecessary render.

Render (DOM changed) Unnecessary render (DOM unchanged)

Counter Default CD

Uses ChangeDetectionStrategy.Default. Angular checks this component on every tick, making all sibling OnPush components appear as unnecessary renders (red).

0
Auto: every 500ms

Static Display OnPushWasted ↑

Uses ChangeDetectionStrategy.OnPush but has no inputs that change. Angular still checks it on every parent tick → appears as a red (unnecessary) render in angular-scan.

This content never changes
Version 1.0.0 — Build 2026.03.08
markForCheck() calls: 0

Item List OnPush

Receives an items input. When the parent passes a new array reference each tick (even with same data), Angular checks this component → yellow render. Use trackBy and stable references to fix this.

Total: 5Done: 2
  • Review PR #42
  • Write unit tests
  • Update angular-scan docs
  • Deploy to staging
  • Performance audit

Dashboard OnPushEfficient

An OnPush component with signal-driven state. Every 800ms one metric updates. Only the changed metric flashes — the others stay clean. Contrast with the Counter above.

Tick #0
CPU
42 %
Memory
1.8 GB
Requests/s
320 rps
Latency
24 ms
Average: 97.0 across 4 metrics