ngDoCheck for custom change detection in Angular - Step-by-Step Execution

Concept Flow - ngDoCheck for custom change detection

Component Initialized

↓

Angular Change Detection Cycle

↓

Call ngDoCheck()

↓

Custom Checks Run

↓

Detect Changes?

Yes→Update View

↓

Cycle Ends

Angular runs its change detection cycle and calls ngDoCheck() where you can add your own checks to detect changes and update the view if needed.

Execution Sample

Angular

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

export class MyComponent implements DoCheck {
  oldValue = '';
  value = '';
  ngDoCheck() {
    if (this.value !== this.oldValue) {
      this.oldValue = this.value;
      console.log('Value changed:', this.value);
    }
  }
}

This component uses ngDoCheck to detect when 'value' changes and logs the change.

Execution Table

Step	value	oldValue	Condition (value !== oldValue)	Action	Output
1 (Init)	''	''	False	No action
2 (Change value to 'A')	'A'	''	True	oldValue = 'A'; log change	Value changed: A
3 (Change detection cycle)	'A'	'A'	False	No action
4 (Change value to 'B')	'B'	'A'	True	oldValue = 'B'; log change	Value changed: B
5 (Change detection cycle)	'B'	'B'	False	No action
6 (No change)	'B'	'B'	False	No action

💡 No further changes detected; ngDoCheck ends without updates.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
value	''	'A'	'B'	'B'
oldValue	''	'A'	'B'	'B'

Key Moments - 2 Insights

Why does ngDoCheck run even when the value hasn't changed?

ngDoCheck is called every Angular change detection cycle (see steps 3,5,6) to allow custom checks, but your condition inside ngDoCheck controls if any action happens.

What happens if you forget to update oldValue inside ngDoCheck?

If oldValue is not updated (see step 2 vs step 4), the condition will always be true and ngDoCheck will log changes repeatedly, causing unnecessary updates.

Visual Quiz - 3 Questions

Look at the execution table, what is oldValue after step 4?

A 'B'

B ''

C 'A'

D 'C'

💡 Hint

Check the 'oldValue' column in the execution_table at step 4.

At which step does the condition (value !== oldValue) become false after a change?

A Step 4

B Step 2

C Step 3

D Step 6

💡 Hint

Look at the 'Condition' column after step 2 and step 3 in the execution_table.

If you set value to 'C' at step 5, what will happen in the next ngDoCheck call?

A No action, condition false

B oldValue updates to 'C' and logs change

C Error because oldValue is not updated

D ngDoCheck stops running

💡 Hint

Refer to how ngDoCheck updates oldValue and logs changes when condition is true in the execution_table.

Concept Snapshot

ngDoCheck is a lifecycle hook Angular calls every change detection cycle.
Use it to run custom change detection logic.
Inside ngDoCheck, compare current and previous values.
If changed, update old values and trigger needed actions.
Helps detect changes Angular's default detection misses.

Full Transcript

This example shows how Angular calls ngDoCheck every change detection cycle. The component tracks a value and an oldValue. When value changes, ngDoCheck detects it by comparing value and oldValue. If different, it updates oldValue and logs the change. If not, it does nothing. This way, you can add your own checks beyond Angular's default detection. The execution table shows each step: initialization, value changes, and detection cycles. The variable tracker shows how value and oldValue update over time. Key moments clarify why ngDoCheck runs often and why updating oldValue is important. The quiz tests understanding of variable states and condition results during the cycle.