How Angular Updates the DOM

The default pass

By default, after events like clicks, timers, or HTTP responses, Angular walks the component tree and re-checks each template for changed values, updating the DOM where needed.

OnPush strategy

OnPush tells Angular to skip a component's subtree unless its @Input()s change by reference (or a signal it reads changes) — a common performance win.

@Component({
  selector: 'app-price-tag',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<span>{{ price() }}</span>`,
})
export class PriceTagComponent {
  price = input.required<number>();
}

Signals play well with OnPush

Because signals track their own readers precisely, components built around them naturally work well with OnPush — you get the performance benefit almost for free.