Zoneless Change Detection

The plain-language idea

For most of Angular's life, change detection ran on Zone.js — a library that monkey-patches every async API in the browser (setTimeout, Promise.then, DOM event listeners, fetch, all of it). Whenever any of those fired, anywhere in your app, Zone.js told Angular "something might have changed," and Angular walked the entire component tree checking for differences. It worked, but it was a blunt instrument: one button click could trigger a full-tree check even for components nowhere near the click.

Zoneless change detection — stable since v20.2, and the default for new apps in v21+ — removes Zone.js from the picture. Without its patching, nothing automatically tells Angular "check everything." Instead, the current default mental model is: components use OnPush change detection, and signals are what actually trigger a re-render. When a signal a template reads changes value, Angular knows precisely which component depends on it and schedules exactly that component for a check — not the whole tree.

See it in a real thing: a zoneless counter

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
});

// counter.component.ts
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button (click)="count.set(count() + 1)">
      Clicked {{ count() }} times
    </button>
  `,
})
export class CounterComponent {
  count = signal(0);
}

No Zone.js is loaded at all — polyfills in angular.json doesn't even include zone.js. Clicking the button calls count.set(count() + 1). Because the template reads count() directly, Angular's reactive graph already knows this exact component depends on this exact signal — so setting it schedules a re-render of CounterComponent and nothing else. There was never a "digest the whole tree" step to begin with; the signal is the notification.

A click fires deep in the tree, inside the Chart component.

BackNext

What people usually miss

Watch out

• "Zoneless" doesn't mean "no change detection." It means precise, signal-driven change detection instead of a blanket re-check triggered by any async event anywhere. Angular still checks components — it just knows exactly which ones and why.
• Plain mutable fields stop working reliably. A component that mutates this.items.push(x) without a signal used to get away with it under Zone.js, because some unrelated async call elsewhere would eventually trigger a global check that happened to catch the mutation. Zoneless removes that accidental safety net — if nothing reactive changed, nothing re-renders.
• Zoneless doesn't require rewriting components. Zone.js-based and zoneless apps can both use OnPush and signals; zoneless is really about removing the automatic-everywhere fallback, not about the component code you write day to day.

The genealogy: this is what the signals lesson was building toward

The signals fundamentals lesson introduced signal() and computed() as reactive primitives; this lesson is where that reactivity stops being "nice for state management" and starts being the actual change-detection mechanism. It's a similar shift to how React re-runs a function component when its state changes — except Angular's signal graph knows the specific component to re-check, rather than re-running a function and diffing the result.