What is Angular change detection?

Why Interviewers Ask This

This is a classic screening question for Angular roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.

Answer

Change detection is Angular's mechanism for keeping the view (DOM) in sync with the component's data model. When data changes, Angular's change detector updates the DOM to reflect those changes. Default strategy (CheckAlways): Angular runs change detection for every component in the tree when ANY async event occurs (user interaction, HTTP response, timer). It traverses the entire component tree from root to leaf, checking if any bindings have changed, and updating the DOM where needed. This is simple but can be slow for large apps. When change detection runs: Angular uses Zone.js to intercept async events — it patches browser APIs (setTimeout, addEventListener, Promise, XHR) and notifies Angular to run change detection after any async operation completes. OnPush strategy: @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) — change detection runs only when: an @Input() reference changes, an event originates from this component or its children, an Observable/Promise used with async pipe emits, or changeDetectorRef.markForCheck() is called manually. This can dramatically improve performance for components that receive large data arrays by reference. Immutability: OnPush requires working with immutable data — always create new arrays/objects instead of mutating. this.items = [...this.items, newItem] (new array reference triggers OnPush) vs this.items.push(newItem) (mutates, doesn't trigger OnPush). Angular 17+ introduced Signals as a new, more efficient change detection primitive.

Pro Tip

This topic has Angular-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.