What is Angular change detection?

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.