OnPush vs Default Change Detection in Angular: Key Differences and Usage

In Angular, default change detection checks the entire component tree on every event, while OnPush only checks a component when its input references change or an event originates inside it. OnPush improves performance by reducing unnecessary checks but requires immutable data or manual triggers.

Quick Comparison

This table summarizes the main differences between default and OnPush change detection strategies in Angular.

Aspect	Default Change Detection	OnPush Change Detection
Trigger	Runs on every event, timer, or async operation	Runs only when @Input reference changes or event inside component
Performance	Less efficient for large apps due to frequent checks	More efficient by skipping unchanged components
Data Handling	Works with mutable or immutable data	Best with immutable data or manual change triggers
Use Case	Simple apps or when automatic updates needed	Optimized apps needing fine control over updates
Developer Control	Less control, automatic detection	More control, may need manual change detection calls

Key Differences

The default change detection strategy in Angular runs after every asynchronous event such as user input, HTTP responses, or timers. It checks every component in the component tree to see if any data has changed, which can cause performance issues in large applications because many components may be checked unnecessarily.

In contrast, the OnPush strategy limits change detection to only when the component's input properties receive new object references or when an event originates inside the component itself. This means Angular skips checking the component if the inputs are unchanged, improving performance by reducing the number of checks.

However, OnPush requires developers to use immutable data patterns or manually trigger change detection (e.g., using ChangeDetectorRef.markForCheck()) when data changes without new references. This gives more control but requires careful data management.

Code Comparison

This example shows a component using the default change detection strategy that updates its display when a button is clicked.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-default-cd',
  template: `
    <p>Counter: {{ counter }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class DefaultCdComponent {
  counter = 0;

  increment() {
    this.counter++;
  }
}

Output

Counter: 0 (initially)
After clicking 'Increment' button, Counter updates to 1, 2, 3, ...

OnPush Equivalent

This example shows the same component using the OnPush change detection strategy. It updates only when the input changes or an event inside triggers detection.

typescript

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-onpush-cd',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Counter: {{ counter }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class OnPushCdComponent {
  counter = 0;

  increment() {
    this.counter++;
  }
}

Output

Counter: 0 (initially)
After clicking 'Increment' button, Counter updates to 1, 2, 3, ...

When to Use Which

Choose default change detection when building small or simple apps where automatic updates without extra effort are preferred. It requires less developer management and works well when performance is not a concern.

Choose OnPush change detection for larger or performance-sensitive apps where you want to minimize unnecessary checks. It works best with immutable data patterns and gives you more control over when Angular updates the UI, but requires careful data handling and sometimes manual triggers.

Key Takeaways

Default change detection checks all components on every event, which can impact performance.

OnPush runs change detection only when input references change or events occur inside the component.

OnPush improves performance but requires immutable data or manual change detection triggers.

Use default for simplicity and OnPush for optimized, large-scale applications.

OnPush gives more control but needs careful data management.