Change Detection Strategies

Angular's default change detection walks the entire component tree on every change detection cycle, checking all bindings for changes.

How Default Change Detection Works

1. An event occurs (click, HTTP response, timer, etc.)
2. Angular runs change detection from the root component
3. Every component's template bindings are checked
4. If any binding changed, the DOM is updated

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`,
  // changeDetection: ChangeDetectionStrategy.Default // default
})
export class ExampleComponent {
  message = 'Hello';
}

When Default Detection Runs

• DOM events (click, input, etc.)
• HTTP responses (subscribe)
• Timers (setTimeout, setInterval)
• Promise resolutions
• Manual markForCheck() calls

Performance Implications

For deep component trees, default change detection can be expensive because it checks every binding in every component, even if nothing changed.

OnPush components only re-render when their input references change, a signal changes, or an event originates from the component.

Enabling OnPush

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

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

When OnPush Components Re-render

1. Input reference changes — New object/array reference
2. Signal changes — Any signal read in the template updates
3. Event originates from the component — (click) handler triggers detection
4. markForCheck() is called — Manually marks the component for checking

// BAD: Mutating an object does NOT trigger OnPush
this.user.name = 'New Name'; // Same reference — no update

// GOOD: New reference triggers OnPush
this.user = { ...this.user, name: 'New Name' };

markForCheck

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

@Component({
  selector: 'app-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
  private cdr = inject(ChangeDetectorRef);
  data: any;

  loadData(): void {
    this.dataService.getData().subscribe(data => {
      this.data = data;
      this.cdr.markForCheck(); // Trigger change detection
    });
  }
}

Default vs OnPush

Signals and OnPush

Signals work with both default and OnPush strategies. A signal read in a template automatically triggers re-render when the signal changes:

@Component({
  selector: 'app-counter',
  template: `<p>{{ count() }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CounterComponent {
  count = signal(0);

  increment(): void {
    this.count.update(c => c + 1); // Triggers re-render
  }
}