tezvyn:

What is the difference between ChangeDetectionStrategy.Default and ChangeDetectionStrategy.OnPush in Angular?

AI-drafted, machine-checkedintermediate
WHAT IT TESTS

Angular change detection and subtree skipping.

ANSWER OUTLINE

Default checks components on most async events; OnPush checks on input changes, DOM events, or async pipe emits.

RED FLAG

OnPush is not a free switch; it requires immutable data.

WHAT THIS TESTS: This question probes whether you understand Angular's unidirectional data flow and the component tree's change detection graph, not just the API names. Seniors are expected to know that Default is a conservative strategy that walks the entire component tree on every zone-stabilizing event, while OnPush creates a memoized boundary. The interviewer wants to see that you can reason about reference equality, event origination, and the async pipe's internal markForCheck call.

A GOOD ANSWER COVERS: First, define Default as the strategy where Angular runs change detection on every component from top to bottom whenever Zone.js detects an async event such as a click, setTimeout, or HTTP response. Second, define OnPush as a strategy that skips a component and its descendants unless one of three things happens: an input property receives a new object reference, a DOM event is handled by the component or its children, or an Observable bound with the async pipe emits and the pipe explicitly calls markForCheck. Third, explain that OnPush is only safe when you treat data as immutable, because mutating an input object without changing its reference will not trigger a check and the UI will stay stale. Fourth, mention that OnPush components can still use EventEmitter and two-way binding as long as the event originates inside their subtree. Fifth, give a concrete performance scenario.

COMMON WRONG ANSWERS: A red flag is saying OnPush automatically improves performance with no code changes. Another is claiming that OnPush disables two-way binding or EventEmitter; it does not, but it does require events or input changes to originate inside the subtree. A dangerous misconception is that OnPush is incompatible with reactive forms or RxJS; in fact, the async pipe is the idiomatic way to drive OnPush templates. Some candidates also think that calling a service method from an OnPush component will automatically update the view; it will not unless the service pushes a new reference into an input or an async pipe. Finally, stating that OnPush turns off change detection entirely reveals a fundamental gap.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle a global state mutation that needs to update an OnPush component, which should lead to pushing a new state reference through an input or using a service with an Observable and the async pipe. They might also ask about ChangeDetectorRef methods such as detach, reattach, detectChanges, and markForCheck, or how to debug a stale OnPush view. Another follow-up is whether OnPush affects content projection or view children.

ONE CONCRETE EXAMPLE: Imagine a financial dashboard with a parent grid containing one hundred child metric cards, each displaying static snapshot data passed via inputs. With Default, scrolling a mouse or any background polling timer triggers change detection across all one hundred cards even though their data has not changed. Switching the cards to OnPush means they only re-render when the parent fetches a new data snapshot and passes a fresh array reference. In profiling, this often cuts change detection time from several milliseconds to sub-millisecond, preventing frame drops during rapid market updates.

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.