Triggering detection manually in Angular - Step-by-Step Execution

Concept Flow - Triggering detection manually

Component Initialized

↓

Change Detection Runs Automatically

↓

Event or Async Task

↓

Manual Trigger Called

↓

Change Detection Runs Manually

↓

View Updates with New Data

This flow shows how Angular normally runs change detection automatically, but you can manually trigger it to update the view when needed.

Execution Sample

Angular

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

constructor(private cdr: ChangeDetectorRef) {}

updateData() {
  this.data = 'new value';
  this.cdr.detectChanges();
}

This code updates a data property and then manually triggers Angular's change detection to update the view immediately.

Execution Table

Step	Action	Change Detection Status	View Update
1	Component initializes	No manual trigger yet	View shows initial data
2	Data changes asynchronously	No automatic detection triggered	View still shows old data
3	Manual detectChanges() called	Change detection runs manually	View updates to show new data
4	No further changes	No detection triggered	View remains updated

💡 Manual change detection completes and view reflects latest data

Variable Tracker

Variable	Start	After Data Change	After detectChanges()	Final
data	'initial value'	'new value'	'new value'	'new value'

Key Moments - 2 Insights

Why doesn't the view update immediately after changing the data variable?

Because Angular's automatic change detection may not run after asynchronous or external changes, so the view stays with old data until detectChanges() is called manually (see execution_table step 2).

What does detectChanges() do when called?

It forces Angular to run change detection immediately, checking for data changes and updating the view accordingly (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the view showing at step 2?

A An error message

B The updated new data

C The initial data

D A loading spinner

💡 Hint

Check the 'View Update' column at step 2 in the execution_table

At which step does Angular run change detection manually?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Change Detection Status' column for when detectChanges() is called

If detectChanges() was not called after data changed, what would happen?

A The view would update automatically anyway

B The view would stay outdated showing old data

C Angular would throw an error

D The component would reload

💡 Hint

Refer to the difference between step 2 and step 3 in the execution_table

Concept Snapshot

Triggering detection manually in Angular:
- Use ChangeDetectorRef injected in constructor
- Call detectChanges() to run change detection immediately
- Useful when data changes outside Angular's automatic detection
- Ensures view updates to latest data
- Prevents stale UI after async or external updates

Full Transcript

In Angular, change detection usually runs automatically to update the view when data changes. However, sometimes data changes happen outside Angular's normal detection, like in asynchronous tasks or external events. In those cases, the view does not update immediately. To fix this, you can manually trigger change detection by injecting ChangeDetectorRef and calling its detectChanges() method. This forces Angular to check for data changes and update the view right away. The execution table shows the component starting with initial data, then data changes asynchronously but the view stays old until detectChanges() is called, after which the view updates. This manual trigger helps keep the UI in sync with data changes that Angular might miss automatically.