Change Detection and Zone.js

Analogy categoryAnalogies

Change detection is the mechanism Angular uses to figure out when component data has changed and the DOM needs to be updated to match. Historically, Angular has relied on Zone.js, a library that monkey-patches asynchronous browser APIs (setTimeout, Promise callbacks, DOM event listeners, XHR, and more) so that Angular can be notified whenever any of these async operations complete. When Zone.js detects such an event, it triggers Angular's change detection to run across the component tree, comparing new values against previously recorded ones and updating any bindings that changed.

🏏

Cricket analogy: Zone.js is like a scorer who watches every ball bowled across the ground and updates the scoreboard the instant any event happens, so the whole team's stats get refreshed whenever a single delivery occurs.

How the change detection tree works

Angular organizes components into a tree that mirrors your template hierarchy. During a change detection cycle, Angular walks this tree from the root downward (in a single pass, top-to-bottom, left-to-right) checking each component's bindings for changes and re-rendering the DOM where a difference is found. By default, this happens with the Default change detection strategy, meaning every component is checked on every cycle regardless of which specific component's data actually changed, which is safe but can become expensive in large trees.

🏏

Cricket analogy: Default change detection is like an umpire reviewing every single fielder's position after every ball is bowled, top of the order to bottom, even though only one player actually moved, which is thorough but slow for a full twenty-over innings.

OnPush and reducing unnecessary checks

Setting a component's changeDetection to ChangeDetectionStrategy.OnPush tells Angular to skip checking that component (and its subtree) unless one of a few specific triggers occurs: an @Input() reference changes, an event originates from within the component template, an Observable bound with the async pipe emits, or change detection is explicitly triggered via markForCheck(). OnPush dramatically reduces wasted work in large applications but requires immutable data patterns, since Angular only detects reference changes, not deep mutations.

🏏

Cricket analogy: OnPush is like a captain who only re-assesses a fielder's position when that fielder is actually thrown the ball, an event happens near them, or the coach explicitly signals a reset, skipping the rest of the field entirely otherwise.

typescript

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-price-tag',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<span>{{ price | currency }}</span>`,
})
export class PriceTagComponent {
  @Input() price!: number;
}

// Parent must pass a NEW reference/value to trigger a re-check under OnPush:
// this.item = { ...this.item, price: newPrice }; // ✅ triggers check
// this.item.price = newPrice;                    // ❌ mutation, no re-check under OnPush

Zoneless change detection

With the rise of signals, Angular has introduced zoneless change detection as an alternative to Zone.js. Because signals notify Angular precisely when their value changes (rather than relying on patched async APIs to guess that 'something might have changed'), Angular can schedule change detection exactly when needed, only for the components that read the changed signal. Enabling provideExperimentalZonelessChangeDetection() (now stabilizing as provideZonelessChangeDetection() in recent releases) removes Zone.js from the bundle entirely, reducing bundle size and eliminating an entire class of change-detection-timing bugs caused by code running outside Zone.js's patched context.

🏏

Cricket analogy: Zoneless change detection with signals is like a scorer who is texted the exact ball and exact stat that changed, instead of scanning the whole scoreboard after every delivery, letting them update only that one number precisely.

Zone.js's approach is often compared to a global 'polling with async hooks' strategy: it doesn't know exactly what changed, only that something asynchronous just completed, so Angular's default behavior is to re-check everything. Signals flip this to a 'push notification' model closer to how React's fine-grained state updates or Vue's reactivity system work, where the framework knows precisely which piece of UI depends on the changed value.

A classic pitfall with OnPush components is mutating an object or array property in place (e.g. this.items.push(newItem)) and expecting the view to update — because the reference didn't change, Angular's OnPush check sees no difference. Always create new references (spread, .map(), .filter(), or signals) so OnPush components detect the change. Similarly, code that manually escapes Zone.js (via NgZone.runOutsideAngular()) but forgets to call NgZone.run() when it needs to update bindings will find the UI silently fails to refresh.

In practice, most teams today still run with Zone.js enabled but use OnPush plus signals to minimize the number of components change detection needs to visit, while newer applications increasingly experiment with fully zoneless setups now that signals provide the fine-grained reactivity Zone.js was originally approximating with coarse async-completion hooks.

🏏

Cricket analogy: Running Zone.js with OnPush and signals is like a team still using the traditional scoreboard system but training fielders to react only when the ball actually comes to them, a hybrid approach ahead of a full switch to instant player-tracking chips.

Zone.js patches async browser APIs so Angular knows when to run change detection after events, timers, and promises resolve.
Default change detection checks every component top-down on every cycle; OnPush skips subtrees unless inputs, events, async pipe emissions, or markForCheck() occur.
OnPush requires immutable update patterns — mutating objects/arrays in place will not trigger a re-check.
Signals enable zoneless change detection, where updates are scheduled precisely based on which signals actually changed.
Zoneless apps remove Zone.js entirely, shrinking bundle size and avoiding a class of subtle async-context bugs.
NgZone.runOutsideAngular() / NgZone.run() give manual control over when Zone.js-driven change detection runs.