angular-performance

Change detection strategy

Default rule: every new component gets ChangeDetectionStrategy.OnPush.

OnPush limits re-renders to signal/input changes and explicit markForCheck() calls.

BAD — Default change detection spams re-renders

@Component({
  // No changeDetection specified → Default → re-renders on every browser event
  template: `<p>{{ expensive() }}</p>`
})
export class ListComponent { }

GOOD — OnPush limits rendering

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ expensive() }}</p>`
})
export class ListComponent { }

With signals, the component renders only when a consumed signal changes — even without explicit markForCheck().

---

Zoneless change detection (Angular 18+ experimental; stable Angular 20)

Use when: migrating away from zone.js for fine-grained rendering and smaller bundles.

// app.config.ts — Angular 18+ (experimental name):
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

// Angular 20+ (stable, renamed):
import { provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()   // remove zone.js from polyfills too
  ]
};

Remove zone.js from angular.json polyfills when enabling zoneless:

{ "polyfills": [] }   // was: ["zone.js"]

All change detection must then be signal-driven or via markForCheck() — imperative mutations to class properties no longer trigger re-renders.

---