Angular › Angular Style Guide & Best Practices

Why does the Angular style guide recommend using the OnPush change detection strategy where possible?

Intermediate

Answer

OnPush tells Angular to only check a component for changes when its inputs actually change by reference, or when an event happens inside it, rather than checking it on every single change detection cycle throughout the whole app. This can meaningfully improve performance, especially in larger applications 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 the team applies the OnPush strategy 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?;Does adopting OnPush everywhere in an app come with any real downsides?

Change Detection;Performance & Lazy Loading