Zone.js and automatic detection in Angular - Step-by-Step Execution

Concept Flow - Zone.js and automatic detection

Start Angular App

↓

Zone.js patches async APIs

↓

Async task starts (e.g., click, timer)

↓

Zone.js tracks task execution

↓

Angular detects changes automatically

↓

Angular updates the DOM

↓

Async task ends

↓

Wait for next async task

Zone.js wraps async tasks to track when they start and finish, letting Angular automatically detect changes and update the UI.

Execution Sample

Angular

button.addEventListener('click', () => {
  this.count++;
});

When the button is clicked, Zone.js detects the event and Angular updates the UI automatically.

Execution Table

Step	Async Task	Zone.js Action	Angular Change Detection	DOM Update
1	App starts	Zone.js patches async APIs	No change detection yet	Initial DOM rendered
2	User clicks button	Zone.js detects click event start	No change detection yet	No DOM update
3	Click handler runs	Zone.js tracks task execution	Change detection runs after handler	DOM reflects new count
4	Click handler ends	Zone.js detects task end	No further change detection	DOM stable
5	Wait for next async task	Zone.js idle	No change detection	DOM unchanged

💡 No async tasks running, Angular waits for next event to trigger change detection

Variable Tracker

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

Key Moments - 2 Insights

Why does Angular update the UI without calling detectChanges() manually?

Because Zone.js tracks async tasks and automatically triggers Angular's change detection after they finish, as shown in steps 2 and 3 of the execution_table.

What happens if an async task is not patched by Zone.js?

Angular won't detect changes automatically for that task, so the UI won't update unless change detection is triggered manually. This is why Zone.js patches common async APIs (step 1).

Visual Quiz - 3 Questions

Look at the execution_table, what triggers Angular's change detection?

A Zone.js detecting the start of an async task

B Zone.js detecting the end of an async task

C Angular manually calling detectChanges()

D DOM updating automatically without detection

💡 Hint

Check steps 2 and 3 where Angular runs change detection after Zone.js tracks task execution.

According to variable_tracker, what is the value of count after the second click?

A 2

B 1

C 0

D Undefined

💡 Hint

Look at the 'After Click 2' column for the 'count' variable.

If Zone.js did not patch the click event, what would happen to Angular's automatic detection?

A Angular would still detect changes automatically

B Angular would never update the DOM

C Angular would require manual change detection calls

D Zone.js would patch other async tasks instead

💡 Hint

Refer to key_moments about what happens if async tasks are not patched.

Concept Snapshot

Zone.js wraps async tasks like clicks and timers.
It tracks when tasks start and finish.
After tasks finish, Angular runs change detection automatically.
This updates the UI without manual calls.
If tasks aren't patched, manual detection is needed.

Full Transcript

Zone.js is a library Angular uses to watch asynchronous tasks such as clicks or timers. When the app starts, Zone.js patches these async APIs to track their execution. When a user clicks a button, Zone.js detects the start of this async event and tracks it. After the click handler runs and the task ends, Zone.js notifies Angular to run change detection. Angular then updates the DOM to reflect any changes, like incrementing a counter. This process happens automatically without the developer needing to call change detection manually. If an async task is not patched by Zone.js, Angular will not detect changes automatically, and manual detection calls are required.