What is Angular’s Change Detection mechanism? explain with real world examples and code

Angular's Change Detection mechanism ensures that the user interface (UI) stays in sync with the underlying data model by detecting and reflecting changes whenever the model is updated. This mechanism is central to how Angular updates the UI after events like user input, HTTP responses, and asynchronous tasks.

How Does Change Detection Work?

When an event triggers a change (like clicking a button or receiving data from an API), Angular compares the current state of the data to the previous state and updates the view if necessary. This process is called dirty checking.

Real-World Example: User Profile Update

Let's consider a simple user profile page where a user can update their profile information, like their name and email. When the user updates the data, Angular should automatically update the UI to reflect the changes.

Without Change Detection (Manually Triggered)

Imagine a scenario where we manually handle change detection for better performance or control.

Step 1: Define Angular Component with Default Change Detection

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

@Component({
  selector: 'app-profile',
  template: `
    <div>
      <h2>User Profile</h2>
      <label for="name">Name: </label>
      <input id="name" [(ngModel)]="user.name" />
      <br/>
      <label for="email">Email: </label>
      <input id="email" [(ngModel)]="user.email" />
      <br/>
      <button (click)="updateUserProfile()">Update Profile</button>
      <h3>Updated Info</h3>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `,
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
  user = { name: 'John Doe', email: 'john@example.com' };

  updateUserProfile() {
    // Simulate a server-side update
    setTimeout(() => {
      this.user.name = 'Jane Doe';  // Update the name
      this.user.email = 'jane@example.com';  // Update the email
    }, 2000);
  }
}

Step 2: Angular Change Detection Flow

1. Initial Rendering: Angular renders the UI with the initial user.name and user.email values.
2. User Action: When the user clicks the "Update Profile" button, it triggers the updateUserProfile() method.
3. Data Change: After 2 seconds (simulating an API call), the user.name and user.email are updated.
4. Change Detection: Angular automatically detects the data change and updates the DOM to reflect the new values for user.name and user.email.

In this example, Angular’s default change detection mechanism automatically checks for updates after the asynchronous task (like setTimeout) is completed, and updates the UI with the new values.

Change Detection Strategies

Angular provides different Change Detection Strategies that control when the change detection mechanism is triggered. By default, Angular uses the Default strategy, which checks every component in the component tree whenever a change occurs.

OnPush Change Detection Strategy

In scenarios where performance optimization is important, Angular allows you to use the OnPush strategy, which checks components only when certain conditions are met (e.g., input properties change, or an event is fired within the component).

Step 1: Change Component to Use OnPush Strategy

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

@Component({
  selector: 'app-profile',
  template: `
    <div>
      <h2>User Profile</h2>
      <label for="name">Name: </label>
      <input id="name" [(ngModel)]="user.name" />
      <br/>
      <label for="email">Email: </label>
      <input id="email" [(ngModel)]="user.email" />
      <br/>
      <button (click)="updateUserProfile()">Update Profile</button>
      <h3>Updated Info</h3>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileComponent {
  user = { name: 'John Doe', email: 'john@example.com' };

  updateUserProfile() {
    // Simulate a server-side update
    setTimeout(() => {
      this.user.name = 'Jane Doe';  // Update the name
      this.user.email = 'jane@example.com';  // Update the email
    }, 2000);
  }
}

Step 2: How OnPush Works

1. Initial Rendering: The component is rendered, but it uses the OnPush strategy.
2. User Action: When the user clicks the "Update Profile" button, the updateUserProfile() method is triggered.
3. Change Detection: After 2 seconds, the values of user.name and user.email are updated. However, since the component is using OnPush, Angular does not automatically check the component for changes unless one of the following occurs:
   • The input property of the component changes.
   • An event (such as a click) is triggered inside the component.
   • A manual change detection trigger is called.

Step 3: Manually Triggering Change Detection (Using ChangeDetectorRef)

If you want Angular to check the component manually, you can inject and use the ChangeDetectorRef service to trigger change detection.

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

@Component({
  selector: 'app-profile',
  template: `
    <div>
      <h2>User Profile</h2>
      <label for="name">Name: </label>
      <input id="name" [(ngModel)]="user.name" />
      <br/>
      <label for="email">Email: </label>
      <input id="email" [(ngModel)]="user.email" />
      <br/>
      <button (click)="updateUserProfile()">Update Profile</button>
      <h3>Updated Info</h3>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileComponent {
  user = { name: 'John Doe', email: 'john@example.com' };

  constructor(private cdRef: ChangeDetectorRef) {}

  updateUserProfile() {
    // Simulate a server-side update
    setTimeout(() => {
      this.user.name = 'Jane Doe';  // Update the name
      this.user.email = 'jane@example.com';  // Update the email

      // Manually trigger change detection
      this.cdRef.markForCheck();
    }, 2000);
  }
}

In this example, after updating the user.name and user.email, we manually call this.cdRef.markForCheck() to notify Angular that it needs to check this component for changes and update the view.

When to Use OnPush Strategy?

The OnPush strategy is useful in the following scenarios:

1. Optimizing Performance: By checking fewer components, especially in large applications with many components, OnPush reduces the overhead of change detection.
2. Predictable Updates: It can provide more predictable performance, as it only triggers updates when specific changes occur (e.g., inputs or events).
3. Immutable Data: If the component relies on immutable data (i.e., the data doesn't change in place but is replaced by new references), OnPush is very effective.

Summary of Change Detection Mechanism

1. Default Strategy:

   • Angular checks all components whenever an event occurs.
   • Ideal for small applications or when change detection is not a performance concern.

2. OnPush Strategy:

   • Angular only checks the component when specific conditions are met (e.g., inputs change or events trigger).
   • Great for optimizing large applications with complex UIs.

3. Manual Change Detection:

   • Allows developers to control when Angular checks for changes, using ChangeDetectorRef.
   • Useful when you need to trigger updates manually for performance reasons.

Understanding Angular's change detection mechanism and its strategies helps in building performant, reactive applications while ensuring that the UI remains in sync with the underlying data.