How Does Change Detection Work in Angular?

What is Change Detection?

Change Detection is Angular mechanism that monitors data changes and updates template (DOM) if needed.

When something changes in application — Angular triggers change detection process and compares component values with what's already rendered to determine if DOM needs re-rendering.

How Does It Work?

1. Angular starts check from root component.
2. Traverses component tree downward.
3. Checks each binding ({{ value }}, [property], (event)) for changes.
4. If value changed — DOM is updated.

What Triggers Change Detection?

Angular uses zone.js library to automatically "capture" events causing changes:

Example: Automatic DOM Update

@Component({
  selector: 'app-example',
  template: `<p>{{ counter }}</p> <button (click)="increment()">+</button>`
})
export class ExampleComponent {
  counter = 0;

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

Angular automatically tracks counter change after button click and updates DOM.

Change Detection Strategies

Angular supports two change detection strategies:

Using OnPush:

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

This reduces number of checks, improving performance, especially in large applications.

How Does Angular Compare Values?

Angular uses reference comparison (shallow reference check):

this.user.name = "John"; // doesn't trigger OnPush!
this.user = { name: "John" }; // triggers, because new reference

To update component with OnPush strategy — need to create new object.

How to Optimize Change Detection?

• Use ChangeDetectionStrategy.OnPush everywhere possible.
• Avoid frequent object/array mutations (use immutability).
• Use trackBy in *ngFor to avoid unnecessary re-renders.
• Work with ChangeDetectorRef and NgZone for manual management:

constructor(private cdr: ChangeDetectorRef) {}

update() {
  this.value = newValue;
  this.cdr.detectChanges(); // manually trigger check
}

Read more here.