Angular Zoneless demo

Live code from the Angular Zoneless guide. Full deep-dive in Mastering Angular Signals.

This app runs with no zone.js. Every update below re-renders because a signal changed, not because a zone patched an async API.

1. Signal counter + computed

Count: 0

Doubled (computed): 0

Reading count() in the template marks this view dirty when it changes; the (click) handler marks it dirty too.

2. Async update, no zone.js

Last async tick: idle

With Zone.js gone, a bare setTimeout or resolved Promise no longer triggers change detection on its own. This still re-renders because the callback writes to the asyncValue signal, and a signal write schedules the check.

3. effect() log

An effect() re-runs whenever count() changes.

effect saw count = 0

4. The app's zoneless config

This is the real app.config.ts driving this page. No zone.js polyfill is present, and OnPush is the default in v22.

import {
  ApplicationConfig,
  provideZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
  ],
};

// angular.json: no "zone.js" in the polyfills array.
// v22: ChangeDetectionStrategy.OnPush is the default for new components.