How does Angular Change Detection work?

Introduction

Change detection in Angular is a fundamental mechanism that ensures the application’s view (DOM) stays synchronized with the underlying data model. It is responsible for identifying changes in the application’s state and updating the user interface accordingly.

In this article i have tried to explain the concept of change detection and how angular handles it.

Understanding change detection is crucial for building high-performance Angular applications, especially as they scale in complexity.

What is Change Detection?

Change detection in Angular is the process of tracking changes in component properties and updating the DOM accordingly. It ensures that when data in the application changes, the corresponding view is updated to reflect the new state.

For example, in an Angular component, if a user interacts with a button that modifies a variable, the change detection mechanism ensures that the DOM reflects the updated value without requiring manual intervention.

Example of Change Detection in Action

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

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

  increment() {
    this.counter++; // Angular detects this change and updates the UI
  }
}

In this example, every time the button is clicked, the counter variable changes, and Angular ensures that the updated value is displayed in the DOM.

How Does Change Detection Work in Angular?

Angular uses a zone-based change detection mechanism that monitors asynchronous operations and automatically triggers change detection when necessary.

Change Detection is Triggered When:

1. User interactions occur (e.g., button clicks, input changes, form submissions).
2. Asynchronous operations complete (e.g., HTTP requests, setTimeout, Observables).
3. Component properties are modified (e.g., an object property is updated).
4. Manual change detection is invoked using ChangeDetectorRef.

Angular’s Change Detection Process

The change detection process follows these steps:

1. Detect if a change has occurred – Angular determines whether any component’s properties have changed.
2. Update the DOM if necessary – If a change is detected, Angular updates the corresponding elements in the UI.
3. Propagate changes through the component tree – Change detection runs recursively from the root component down to its child components.
4. Complete the cycle and wait for the next trigger – After processing all changes, Angular waits for the next event to restart the cycle.

Change Detection Strategies in Angular

Angular provides two strategies for managing change detection:

1. Default Change Detection Strategy (ChangeDetectionStrategy.Default)

By default, Angular checks all components for changes every time an event occurs or an asynchronous task completes.

How It Works

• Angular traverses the entire component tree.
• Each component is checked for changes, even if no modifications have been made.
• If any property has changed, the DOM is updated accordingly.

Example: Default Change Detection

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

@Component({
  selector: 'app-default',
  template: `<p>{{ message }}</p> <button (click)="updateMessage()">Update</button>`
})
export class DefaultChangeDetectionComponent {
  message = 'Hello';

  updateMessage() {
    this.message = 'Updated Message'; // Angular detects this change and updates the UI
  }
}

While this approach ensures data consistency, it can become inefficient as applications grow in size and complexity.

2. OnPush Change Detection Strategy (ChangeDetectionStrategy.OnPush)

The OnPush strategy optimizes performance by limiting change detection to specific conditions.

How It Works

• Angular only checks the component when:
  • The component’s @Input() properties receive a new reference.
  • ChangeDetectorRef.markForCheck() is called manually.
• If a component does not receive a new input reference, Angular skips checking it during change detection.

Example: OnPush Change Detection

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

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

In this example, Angular will only update the component if a new object reference is assigned to user, rather than detecting internal property changes.

Updating an OnPush Component

Since Angular does not detect internal mutations, assigning a new reference is necessary:

this.user = { ...this.user, name: 'Updated Name' }; // Triggers change detection

Optimizing Change Detection for Better Performance

1. Use the OnPush Strategy Where Possible

• Avoid unnecessary checks by using ChangeDetectionStrategy.OnPush.
• This ensures that Angular only updates components when inputs change.

2. Avoid Object Mutation

Angular does not detect mutations in objects; instead, assign new references.

Inefficient Approach (Mutation)

this.user.name = 'New Name'; // Change detection will not be triggered

Efficient Approach (New Reference)

this.user = { ...this.user, name: 'New Name' }; // Triggers change detection

3. Use trackBy in *ngFor Loops

When iterating over lists, trackBy prevents unnecessary re-renders by identifying elements using unique identifiers.

Without trackBy (Inefficient)

<li *ngFor="let item of items">{{ item.name }}</li>

This approach causes Angular to re-render the entire list even if only one item changes.

With trackBy (Optimized)

<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>

trackByFn(index: number, item: any) {
  return item.id;
}

This ensures that only modified items are updated.

4. Detach Change Detection for Unnecessary Components

For performance-intensive tasks, change detection can be manually disabled and re-enabled when needed.

Example: Detaching Change Detection

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

constructor(private cdr: ChangeDetectorRef) {
  this.cdr.detach(); // Stops automatic change detection
}

updateManually() {
  this.cdr.detectChanges(); // Manually triggers change detection
}

This prevents Angular from checking the component unless explicitly instructed.

Conclusion

Change detection is a critical part of Angular’s architecture that ensures data consistency between the model and the view. However, improper handling can lead to performance issues in large applications.

Key Takeaways

• Angular’s default change detection checks all components whenever an event occurs.
• The OnPush strategy improves performance by only updating components when inputs change.
• Object mutation should be avoided in favor of assigning new references.
• Using trackBy in *ngFor loops prevents unnecessary DOM re-renders.
• Manually detaching and triggering change detection can optimize performance-intensive components.

Applying these best practices can significantly improve an Angular application’s efficiency and scalability.