Angular › Change Detection

What is the difference between the Default and OnPush change detection strategies?

Intermediate

Answer

The Default strategy checks every component in the app on every change detection cycle, regardless of whether its data actually changed. The OnPush strategy only checks a component when one of its inputs changes by reference, an event happens inside it, or an observable it is subscribed to emits a new value, which can meaningfully improve performance in larger apps.

@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 switching every individual product card component to OnPush, 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?

Performance & Lazy Loading;Angular Signals