Loading...
Spaceplay← →stepRreset
See how Angular change detection works with an interactive visualization. Compare zone.js triggering a full tree check, OnPush skipping unchanged subtrees, and signals marking only the exact components that read a changed value.
Loading visualization...
Change detection is the process Angular runs to find template bindings whose values changed and write the new values to the DOM. How it is triggered and how much of the tree it visits depends on whether the app uses zone.js, OnPush, or signals.
Angular templates contain bindings such as {{ qty }} or [items]="items". Angular does not know when the underlying values change, so it periodically re-evaluates the bindings, compares each result with the value it stored last time, and updates the DOM only where the result differs. This comparison is called dirty checking, and a full run of it is a change detection pass.
In a classic application the pass is triggered by zone.js. zone.js monkey-patches browser APIs such as addEventListener, setTimeout, Promise.then and XMLHttpRequest so that every callback runs inside an Angular zone. When the callback finishes and the microtask queue drains, NgZone emits onMicrotaskEmpty and ApplicationRef.tick() walks the whole component tree from the root, checking every binding in every Default-strategy component whether or not anything relevant changed.
ChangeDetectionStrategy.OnPush lets a component opt out of that blanket check. An OnPush view is skipped unless something marks it dirty: an @Input received a new reference (compared with Object.is), a template event fired inside the view, an async pipe emitted, or ChangeDetectorRef.markForCheck() was called. Marking a view also marks its ancestors, so the next tick can reach it without checking the siblings along the way.
Signals make the trigger precise instead of coarse. A template that reads a signal registers itself as a consumer in a reactive graph. Writing the signal marks its consumers dirty, which flags exactly those views for refresh and asks the scheduler for a tick. In a zoneless app (provideZonelessChangeDetection) that notification is the only trigger, so the traversal visits the flagged views and passes through their ancestors without evaluating anything else.
Interview framing: define Angular Change Detection in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Pushing into an array or changing a field on an object keeps the same reference, so the parent's input binding compares equal and the OnPush child is never marked dirty. The model changes, the DOM does not.
Fix: Treat inputs as immutable and produce a new reference for every change (spread, map, filter). If the change originates inside the component, call ChangeDetectorRef.markForCheck() or store the value in a signal.
Code that runs outside the Angular zone, such as a callback from a library that captured the native setTimeout before zone.js patched it, or anything scheduled with NgZone.runOutsideAngular, finishes without notifying NgZone, so no tick follows.
Fix: Wrap the callback in NgZone.run(), or in a zoneless or signals-based design write the result into a signal so the consuming view is marked dirty explicitly.
Setting a parent's value from a child's ngAfterViewInit, or calling a method with side effects from a template, changes a binding that has already been checked in the same pass. Dev mode reports it as ExpressionChangedAfterItHasBeenCheckedError; production silently renders stale output.
Fix: Move the update to a point before the check (ngOnInit, a signal computed, or an effect) rather than working around the error with setTimeout or detectChanges().
Calling count() once inside a constructor or a plain method copies the value; it does not subscribe anything. Only reads inside a template, computed, or effect create graph edges.
Fix: Read signals where the value is consumed: in the template, in a computed() that the template reads, or in an effect() when you need a side effect.
Common interview prompts with concise model answers.
zone.js patches async browser APIs so that callbacks run inside an Angular zone and Angular is notified when they finish. That notification triggers ApplicationRef.tick(). zone.js does not know what the callback changed, which is why the default pass checks every binding in every Default component.
When one of its @Input references changes (Object.is comparison), when a template event listener inside it fires, when an async pipe in its template emits, when markForCheck() is called, or when a signal read in its template is written. Otherwise the whole subtree is skipped during the pass.
@Component({
selector: 'app-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `@for (it of items; track it.id) {
<app-item [item]="it" />
}`,
})
export class ListComponent {
@Input() items: Item[] = [];
}
// parent: same reference, List is skipped
this.items[0].qty++;
// parent: new reference, List is marked dirty
this.items = this.items.map((it, i) =>
i === 0 ? { ...it, qty: it.qty + 1 } : it);After the real pass, dev mode runs checkNoChanges(), which re-evaluates every binding without writing to the DOM. If any expression now returns a different value, some code changed state during the pass, and Angular throws to surface it. Production skips the verification pass for performance, so the same bug renders stale output instead of throwing.
Reading a signal in a template records a producer to consumer edge. Writing the signal marks its consumers dirty, which flags the exact views that read it for refresh and marks their ancestors for traversal only. The next tick descends through those ancestors without evaluating their bindings and refreshes only the flagged views, so the work is proportional to the readers of the changed value.
export class ItemComponent {
count = signal(0);
double = computed(() => this.count() * 2);
add() { this.count.set(this.count() + 1); }
}
// template: {{ double() }}
// count.set(1) -> double dirty -> this view flagged
// double recomputes lazily during the refresh: 1 * 2 = 2zone.js is no longer loaded, so finishing an async task does not trigger anything. Change detection runs only when Angular is told explicitly: a signal read in a template changes, a template event fires, markForCheck() is called, an async pipe emits, or ComponentRef.setInput() is used. Code that relied on a plain setTimeout or a manual property assignment to refresh the view stops working until it goes through one of those paths.
Continue with these concepts to strengthen your mental model.
@Component({ selector: 'app-item', template: `<button (click)="add()">{{ qty }}</button>`,})export class ItemComponent { @Input() qty = 0; add() { this.qty++; }} bootstrapApplication(AppComponent, { providers: [provideZoneChangeDetection()],}); // zone.js wraps addEventListener, setTimeout, Promise.then, XHR// NgZone.onMicrotaskEmpty -> ApplicationRef.tick()waiting
waiting
no checks yet