What is ngDoCheck in Angular: Explanation and Example

ngDoCheck is an Angular lifecycle hook that lets a component detect and act on changes that Angular's default change detection might miss. It runs during every change detection cycle, allowing custom checks beyond Angular's automatic checks.

How It Works

Imagine Angular's change detection as a security guard who checks if anything changed in your app automatically. Sometimes, this guard might miss small or complex changes, like when you modify an object property without changing its reference. ngDoCheck is like giving you a special tool to do your own detailed check during each security round.

When Angular runs change detection, it calls ngDoCheck on your component. You can write code inside this method to compare values or detect changes manually. This way, you can respond to changes that Angular's default system doesn't catch, such as deep object mutations or custom change logic.

Example

This example shows a component using ngDoCheck to detect changes in an object property that Angular's default change detection would miss.

typescript

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

@Component({
  selector: 'app-ngdocheck-example',
  template: `
    <h3>Counter: {{ counter.value }}</h3>
    <button (click)="increment()">Increment</button>
    <p>Change detected: {{ changeDetected }}</p>
  `
})
export class NgDoCheckExampleComponent implements DoCheck {
  counter = { value: 0 };
  private oldValue = 0;
  changeDetected = false;

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

  ngDoCheck() {
    if (this.counter.value !== this.oldValue) {
      this.changeDetected = true;
      this.oldValue = this.counter.value;
    } else {
      this.changeDetected = false;
    }
  }
}

Output

Counter: 0
[Clicking Increment button]
Counter: 1
Change detected: true

When to Use

Use ngDoCheck when you need to detect changes that Angular's default change detection misses. For example, if you modify properties inside objects or arrays without changing their references, Angular won't notice those changes automatically.

Common real-world cases include:

• Detecting deep changes in complex objects or arrays.
• Implementing custom change detection logic for performance optimization.
• Tracking changes in third-party objects that Angular can't observe.

However, use it carefully because it runs very often and can slow down your app if the checks are expensive.

Key Points

• ngDoCheck runs during every Angular change detection cycle.
• It allows manual detection of changes Angular might miss.
• Useful for deep or custom change detection scenarios.
• Can impact performance if used with heavy logic.
• Works alongside other lifecycle hooks like ngOnChanges.

Key Takeaways

ngDoCheck lets you manually detect changes Angular's default system misses.

It runs every change detection cycle, so keep checks efficient.

Use it for deep object or custom change detection needs.

Avoid heavy logic inside ngDoCheck to prevent slowdowns.

It complements, but does not replace, Angular's automatic change detection.