What is Angular Change Detection and how does it work?

Question

How does Angular change detection work, and what is the OnPush strategy?

Answer

Angular's change detection is the mechanism that keeps the DOM in sync with the application state. After every browser event (click, keyup, HTTP response, timer), Angular runs change detection — walking the component tree from root to leaves and updating any bindings whose values changed.

Default Strategy

Angular checks every component in the tree after every event — safe but expensive for large apps.

@Component({ changeDetection: ChangeDetectionStrategy.Default })
// Checked on every event, regardless of what changed

OnPush Strategy

Angular only checks the component when:

1. An @Input() reference changes
2. An event originates inside the component
3. An async pipe emits a new value
4. ChangeDetectorRef.markForCheck() is explicitly called

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductCardComponent {
  @Input() product!: Product;
  // Only re-checked when product reference changes
}

Zone.js

Angular uses Zone.js to monkey-patch browser APIs (setTimeout, fetch, event listeners) so it knows when to run change detection. Angular 17+ introduced experimental Zoneless mode using Signals, which removes Zone.js entirely for better performance.

Signals Change Detection

// With signals, Angular precisely knows which component to update
readonly count = signal(0);
// Only components that read count() are re-rendered when it changes