Angular › Performance & Lazy Loading

How does the OnPush change detection strategy improve performance in a large Angular application?

Intermediate

Answer

OnPush tells Angular to only check a component when its inputs change by reference, an event happens inside it, or an observable it depends on emits, rather than checking it on every single change detection cycle throughout the app. This meaningfully reduces unnecessary work in apps with many components.

@Component({
  selector: 'app-product-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ product.name }}</p>`
})
export class ProductCardComponent {
  @Input() product!: Product;
}

Real-world example A large product listing page noticeably speeds up after applying OnPush to every individual product card component, since Angular no longer needs to unnecessarily check every single card on every user interaction elsewhere on the page.

Common follow-ups: What specifically needs to change for OnPush to correctly detect an update to an input object?;How do signals help make this optimization even more automatic?

Change Detection;Angular Signals