ngDoCheck for custom change detection in Angular - Deep Dive

Overview - ngDoCheck for custom change detection

What is it?

ngDoCheck is a special method in Angular components that lets you run your own code to check for changes. Instead of relying only on Angular's automatic change detection, you can customize how and when Angular notices updates. This is useful when Angular's default checks are not enough or too slow. It gives you control to detect changes in complex or unusual cases.

Why it matters

Without ngDoCheck, Angular only detects changes in simple ways, like when object references change. But many real apps have complex data or performance needs where Angular misses updates or checks too often. ngDoCheck lets developers fix these problems by writing their own checks. This improves app speed and correctness, making user interfaces feel smooth and reliable.

Where it fits

Before learning ngDoCheck, you should understand Angular components, templates, and the default change detection system. After mastering ngDoCheck, you can explore advanced topics like ChangeDetectorRef, OnPush strategy, and performance optimization techniques in Angular.

Mental Model

Core Idea

ngDoCheck lets you take control of Angular's change detection by running your own custom checks every time Angular looks for updates.

Think of it like...

Imagine a security guard who usually checks only the main doors for intruders. ngDoCheck is like giving the guard a checklist to inspect hidden windows and secret passages too, so nothing sneaky gets missed.

┌─────────────────────────────┐
│ Angular Change Detection Run │
├─────────────────────────────┤
│ 1. Check default bindings     │
│ 2. Call ngDoCheck()           │
│    └─ Your custom checks run  │
│ 3. Update view if needed      │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is Angular Change Detection

Concept: Angular automatically checks for changes in component data to update the view.

Angular runs change detection to see if data used in templates has changed. It compares old and new values and updates the screen if needed. This happens after events like clicks or HTTP responses.

Result

The user interface stays in sync with the component data without manual updates.

Understanding Angular's automatic change detection is key before customizing it with ngDoCheck.

2

Foundation

Default Change Detection Limitations

Concept: Angular's default checks only detect changes when object references change, not internal mutations.

If you change a property inside an object or array without replacing the whole object, Angular might not notice. For example, pushing to an array doesn't trigger updates because the array reference stays the same.

Result

Some UI updates may not happen automatically, causing stale or incorrect views.

Knowing these limits explains why custom checks like ngDoCheck are sometimes necessary.

3

Intermediate

Introducing ngDoCheck Hook

Concept: ngDoCheck is a lifecycle method you add to your component to run custom change detection code.

By implementing ngDoCheck(), Angular calls this method every time it runs change detection. Inside, you can write code to detect changes Angular misses, like deep object comparisons or manual flag checks.

Result

You gain control to detect complex changes and update the view accordingly.

Using ngDoCheck bridges the gap between Angular's default detection and your app's specific needs.

4

Intermediate

Writing Custom Checks in ngDoCheck

🤔Before reading on: do you think ngDoCheck runs once or multiple times per change detection cycle? Commit to your answer.

Concept: You can compare previous and current values manually inside ngDoCheck to detect changes.

Store previous values in component properties. In ngDoCheck, compare current data with stored values. If different, update stored values and trigger actions like calling ChangeDetectorRef.markForCheck() or updating UI state.

Result

Angular updates the view only when your custom logic detects real changes.

Knowing ngDoCheck runs often means your checks must be efficient to avoid slowing the app.

5

Intermediate

Using ngDoCheck with OnPush Strategy

🤔Before reading on: does ngDoCheck work with OnPush change detection? Commit to yes or no.

Concept: ngDoCheck works even when OnPush strategy is used, allowing custom detection in optimized components.

OnPush tells Angular to check components only when inputs change by reference. ngDoCheck still runs every detection cycle, letting you detect internal changes OnPush misses. Combine with ChangeDetectorRef to update views.

Result

You can optimize performance with OnPush but still handle complex changes via ngDoCheck.

Understanding this helps balance performance and correctness in Angular apps.

6

Advanced

Performance Considerations with ngDoCheck

🤔Before reading on: do you think heavy computations in ngDoCheck affect app speed? Commit to yes or no.

Concept: ngDoCheck runs frequently, so inefficient code inside it can slow down the app.

Avoid expensive operations like deep object cloning or large loops inside ngDoCheck. Use lightweight checks or memoization. Consider using immutable data patterns to reduce custom checks needed.

Result

Your app remains responsive and fast even with custom change detection.

Knowing the cost of ngDoCheck guides writing performant Angular components.

7

Expert

ngDoCheck Internals and Change Detection Cycle

🤔Before reading on: do you think ngDoCheck runs before or after Angular's default checks? Commit to your answer.

Concept: ngDoCheck runs during Angular's change detection cycle after default checks but before view updates.

Angular runs default checks on bindings, then calls ngDoCheck for custom logic. If ngDoCheck detects changes, it can trigger further change detection or mark views for update. This cycle ensures all changes are caught before rendering.

Result

You understand how ngDoCheck fits inside Angular's internal process and can predict its effects.

Understanding the timing of ngDoCheck helps avoid bugs like infinite loops or missed updates.

Under the Hood

Angular's change detection runs in cycles triggered by events. During each cycle, Angular checks all components' bindings for changes by comparing old and new values. After these default checks, Angular calls ngDoCheck on components that implement it. Inside ngDoCheck, developers can run custom logic to detect changes Angular misses, such as deep property mutations. If changes are detected, Angular can mark components for re-rendering. This process repeats every cycle, ensuring the UI stays in sync with data.

Why designed this way?

Angular's default change detection is fast and simple but limited to shallow checks. Complex apps needed a way to detect changes that don't involve new object references. ngDoCheck was introduced to give developers a hook to add custom detection logic without changing Angular's core. This design balances performance with flexibility, allowing Angular to remain efficient while supporting advanced use cases.

┌───────────────────────────────┐
│ Angular Change Detection Cycle │
├───────────────────────────────┤
│ 1. Check default bindings       │
│    (shallow checks)             │
│                               │
│ 2. Call ngDoCheck()             │
│    └─ Run custom checks         │
│                               │
│ 3. If changes detected          │
│    └─ Mark views for update     │
│                               │
│ 4. Update DOM/view              │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does ngDoCheck replace Angular's default change detection? Commit to yes or no.

Common Belief: ngDoCheck replaces Angular's default change detection entirely.

Reality: ngDoCheck runs in addition to Angular's default checks; it does not replace them.

Why it matters: Thinking it replaces default detection can cause missing important automatic updates or redundant checks.

Quick: Is it safe to run heavy computations inside ngDoCheck? Commit to yes or no.

Common Belief: You can run any code inside ngDoCheck without performance issues.

Reality: ngDoCheck runs very often, so heavy computations inside it can slow down the app significantly.

Why it matters: Ignoring performance can cause laggy interfaces and poor user experience.

Quick: Does ngDoCheck detect changes automatically for all data mutations? Commit to yes or no.

Common Belief: ngDoCheck automatically detects all changes without extra code.

Reality: ngDoCheck requires you to write custom logic to detect changes; it does not detect changes by itself.

Why it matters: Assuming automatic detection leads to bugs where UI does not update as expected.

Quick: Can ngDoCheck cause infinite loops if not used carefully? Commit to yes or no.

Common Belief: ngDoCheck is safe and cannot cause infinite loops.

Reality: If ngDoCheck triggers change detection repeatedly without stopping, it can cause infinite loops.

Why it matters: Not understanding this can crash apps or freeze the UI.

Expert Zone

1

ngDoCheck runs every change detection cycle, even if inputs haven't changed, so it can be a performance trap if misused.

2

Combining ngDoCheck with immutable data patterns reduces the need for complex custom checks and improves maintainability.

3

Using ChangeDetectorRef inside ngDoCheck allows fine-grained control over when Angular updates views, but misuse can cause subtle bugs.

When NOT to use

Avoid ngDoCheck when simple input bindings or OnPush strategy suffice. Instead, use immutable data and pure pipes for performance. Use ngDoCheck only when you must detect deep or complex changes that Angular misses.

Production Patterns

In real apps, ngDoCheck is used to detect changes in deeply nested objects or arrays mutated in place. Developers often combine it with ChangeDetectorRef.markForCheck() to update OnPush components. It is also used to optimize performance by skipping unnecessary checks or to integrate with third-party libraries that mutate data outside Angular's knowledge.

Connections

Observer Pattern

ngDoCheck builds on the idea of observing changes but requires manual detection logic.

Understanding observer patterns helps grasp why Angular needs hooks like ngDoCheck to watch for changes that automatic detection misses.

Immutable Data Structures

Immutable data reduces the need for ngDoCheck by making change detection simpler and more reliable.

Knowing immutable data helps you write Angular apps that rely less on custom checks and run faster.

Quality Control in Manufacturing

Like ngDoCheck, quality control inspects products beyond standard checks to catch hidden defects.

This cross-domain link shows how custom inspections ensure reliability when automatic checks are insufficient.

Common Pitfalls

#1 Running expensive operations inside ngDoCheck causing slow UI.

Wrong approach:

ngDoCheck() {
this.deepClone = JSON.parse(JSON.stringify(this.data));
// heavy cloning every cycle
}

Correct approach:

ngDoCheck() {
if (this.dataChanged()) {
// only run expensive code when needed
}
}

Root cause:

Misunderstanding that ngDoCheck runs very frequently and must be efficient.

#2 Assuming ngDoCheck automatically detects all changes without code.

Wrong approach:

ngDoCheck() {
// empty or no comparison logic
}

Correct approach:

ngDoCheck() {
if (this.previousValue !== this.currentValue) {
this.previousValue = this.currentValue;
// trigger update
}
}

Root cause:

Believing ngDoCheck is magic instead of a hook for custom detection.

#3 Triggering change detection inside ngDoCheck causing infinite loops.

Wrong approach:

ngDoCheck() {
this.cdRef.detectChanges(); // triggers another cycle
}

Correct approach:

ngDoCheck() {
// avoid calling detectChanges here
// use markForCheck() if needed
}

Root cause:

Not understanding Angular's change detection cycle and side effects.

Key Takeaways

ngDoCheck is a lifecycle hook that lets you write custom change detection logic in Angular components.

Angular's default change detection only notices changes when object references change, missing internal mutations.

Using ngDoCheck requires careful, efficient code because it runs very often during Angular's change detection cycles.

Combining ngDoCheck with OnPush strategy and ChangeDetectorRef allows powerful performance optimizations.

Misusing ngDoCheck can cause bugs like missed updates or infinite loops, so understanding its timing and costs is essential.