How does Zoneless change detection work in Angular v21?

Zoneless change detection in Angular v21 removes Zone.js, requiring manual or signal-based triggering of change detection. This improves performance by avoiding automatic global checks and updating the UI only when explicitly prompted.

Zoneless mode relies on Signals and explicit change detection calls instead of Zone.js. This leads to faster, more predictable updates, smaller bundles, and clearer debugging.

Code

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

@Component({
  selector: 'app-root',
  template: `<button (click)="update()">Update</button><p>{{message}}</p>`
})
export class AppComponent {
  message = 'Initial';

  constructor(private appRef: ApplicationRef) {}

  update() {
    this.message = 'Updated';
    this.appRef.tick(); // manually trigger change detection
  }
}