How does change detection work in Angular, and what does OnPush do?

Angular patches asynchronous APIs through Zone.js — events, timers, and XHR. When any of them completes, the zone tells Angular that something may have changed, and Angular walks the component tree from the root, re-evaluating every template binding and updating the DOM where a value differs.

The default strategy checks every component on every cycle. That is fine for a small tree and expensive for a large one.

ChangeDetectionStrategy.OnPush tells Angular to skip a component unless one of these happens:

• An @Input reference changes — a reference, which is why mutating an array in place does not trigger it and creating a new array does.
• An event fires from within the component or its template.
• An observable bound with the async pipe emits.
• Change detection is triggered manually with markForCheck().

The consequence: OnPush pushes you towards immutable data, which is a good thing anyway.

Note: Signals are the direction of travel. They let Angular know exactly which templates depend on which values, enabling fine-grained updates and eventually zoneless applications — worth mentioning as awareness of where the framework is going.