Default change detection strategy in Angular - Step-by-Step Execution

Concept Flow - Default change detection strategy

Event triggers (click, async, etc.)

↓

Angular runs change detection

↓

Traverse component tree

↓

Check each component's bindings

↓

Update DOM if data changed

↓

Finish change detection cycle

Angular's default change detection runs on every event and checks all components for data changes, updating the DOM accordingly.

Execution Sample

Angular

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

@Component({
  selector: 'app-root',
  template: `<button (click)="increment()">Increment</button><p>{{count}}</p>`
})
export class AppComponent {
  count = 0;
  increment() { this.count++; }
}

A simple Angular component with a button that increments a count displayed on screen, triggering default change detection.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial load	count=0	Render component	count=0	AppComponent	Display count=0
2	User clicks button	count=0	Call increment()	count=1	AppComponent	Update displayed count to 1
3	Change detection runs	count=1	Check bindings	count=1	AppComponent	No further changes
4	User clicks button again	count=1	Call increment()	count=2	AppComponent	Update displayed count to 2
5	Change detection runs	count=2	Check bindings	count=2	AppComponent	No further changes
6	No more events	count=2	No action	count=2	None	No DOM changes

💡 No more events trigger change detection, so Angular stops checking.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 2 Insights

Why does Angular check all components on every event?

Because the default strategy runs change detection for the entire component tree on every event, ensuring all data bindings are up to date as shown in steps 2 and 4 of the execution_table.

Does Angular update the DOM if the data hasn't changed?

No, Angular compares previous and current values during change detection and only updates the DOM if data changed, as seen in steps 3 and 5 where no DOM changes occur.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 2?

A 2

B 0

C 1

D Undefined

💡 Hint

Check the 'State After' column in row for step 2.

At which step does Angular update the DOM to show 'count' as 2?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look for the step where 'count' changes to 2 and DOM updates.

If no user clicks happen, what does Angular do according to the execution table?

A Runs change detection continuously

B Does nothing after initial load

C Updates DOM repeatedly

D Throws an error

💡 Hint

See step 6 where no events trigger change detection.

Concept Snapshot

Default change detection in Angular:
- Runs on every event (click, async, etc.)
- Checks all components in the tree
- Compares data bindings
- Updates DOM only if data changed
- Ensures UI stays in sync automatically

Full Transcript

Angular's default change detection strategy runs after every event like clicks or async operations. It traverses the entire component tree checking each component's data bindings. If it finds any changes, it updates the DOM to reflect the new data. For example, when a button click increments a count variable, Angular detects the change and updates the displayed count. If no changes occur, Angular skips DOM updates to optimize performance. This process repeats on every event, keeping the UI in sync with the data automatically.