Zoneless application

A zoneless application updates views through signal-driven reactivity rather than relying on Zone.js to notice asynchronous work. The proposed model makes components signal-based: their inputs are signals, and they are checked when their signal properties change. This replaces broad, implicit update behavior with an explicit reactive model. section 10.3.4

A signal-based component is proposed to behave differently from a Zone.js-based component:

• Opt out of Zone.js-based change detection. section 10.3.4
• Run change detection when its signal properties change. section 10.3.4
• Treat inputs as signals and use view-based change detection. section 10.3.4
• Allow template function calls safely under the proposed model. section 10.3.4

Going fully zoneless means marking every component as signal-based, allowing Zone.js to be removed. Migration can be incremental: zone-based and signal-based components can coexist, but Zone.js must remain while any zone-based component is present. This makes compatibility a practical constraint rather than an all-or-nothing rewrite. section 10.3.4

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div>
      <input placeholder="Search for product..." [(ngModel)]="query"/>  #1
      <ul>
        @for (product of filteredProducts(); track product.id) {
          <li>
            {{product.name}}
          </li>
        }
      </ul>
    </div>
  `,
})
export class App {
  private readonly productService = inject(ProductService); 
  type = input<number>();  #2
  query = signal('');
  allProducts = computed(() => this.productService.getProductsByType(this.type()));  #3
  filteredProducts = computed(() => {
    return this.allProducts.filter(product => product.name.includes(this.query()))  #4
  });
}

This hypothetical product search component combines a signal-backed query with computed product lists, illustrating the reactive style intended for signal-based components. section 10.3.4

Zoneless applications remain in an experimental developer-preview direction. Adopt the approach as a modernization path toward granular, signal-triggered updates, while planning coexistence with existing Zone.js-based components. section 10.0 section 10.3.4