How Change Detection Works in Angular: Explained Simply

Angular's change detection automatically tracks data changes in components and updates the view accordingly. It works by running a detection cycle that compares current and previous data states, triggered by events like user input or HTTP responses.

Syntax

Angular's change detection is built into the framework and works automatically. You can control it using the ChangeDetectionStrategy enum in a component's decorator.

• Default: Angular checks all components every time an event happens.
• OnPush: Angular checks only when input properties change or events occur inside the component.

Example usage in a component decorator:

typescript

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SampleComponent {
  data = 'Hello';
}

Example

This example shows a component with OnPush change detection. The view updates only when the input changes or an event triggers detection.

typescript

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

@Component({
  selector: 'app-message',
  template: `<p>{{ message }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MessageComponent {
  @Input() message!: string;
}

@Component({
  selector: 'app-root',
  template: `
    <app-message [message]="msg"></app-message>
    <button (click)="changeMessage()">Change Message</button>
  `
})
export class AppComponent {
  msg = 'Initial message';

  changeMessage() {
    this.msg = 'Updated message';
  }
}

Output

Initial message
[Button: Change Message]

When clicking the button, the displayed message changes to 'Updated message'.

Common Pitfalls

One common mistake is mutating objects or arrays without changing their reference when using OnPush. Angular won't detect changes because it compares by reference.

Wrong approach (no view update):

typescript

this.items.push('new item'); // mutates array reference

// Angular OnPush won't detect this change automatically

Common Pitfalls

Right approach (view updates):

typescript

this.items = [...this.items, 'new item']; // creates new array reference

// Angular OnPush detects this change and updates the view

Quick Reference

Concept	Description
ChangeDetectionStrategy.Default	Checks all components on every event
ChangeDetectionStrategy.OnPush	Checks only on input changes or events inside component
Zone.js	Library Angular uses to detect async events triggering change detection
Immutable Data	Recommended for OnPush to detect changes by reference
Manual Detection	Use ChangeDetectorRef methods to trigger detection manually

Key Takeaways

Angular runs change detection automatically to update the UI when data changes.

Use ChangeDetectionStrategy.OnPush for better performance by limiting checks.

Always change object or array references to trigger OnPush detection.

Zone.js helps Angular know when to run change detection after async events.

You can manually trigger change detection using ChangeDetectorRef if needed.