Angular Change Detection: Understanding the Mechanics Behind Manipulating the DOM

Overview

Angular’s change detection is the system that ensures any changes in your application’s data automatically appear in the user interface (UI). The goal is simple: synchronize your app’s visual state with its internal state.

What Triggers Change Detection?

There are two main ways Angular finds out that something may have changed in your app:

Automatic Detection (Zone.js)

• Angular uses Zone.js to monitor asynchronous activities like HTTP requests, user events, and timers.
• When any of these activities are complete, Zone.js tells Angular, “Hey, something happened,” prompting Angular to run change detection.

Manual Detection (Developer Calls)

• Angular provides methods like markForCheck(), signals(), and set() for explicit control over change detection.
• You can call these methods to tell Angular, “I know this part of the application has changed please update the UI.”

Change Detection Strategies

Angular offers two main strategies for deciding how to check your components:

Default Strategy

• Automatic Checks: Angular marks every component as “dirty” whenever it detects an event in Zone.js.
• Easy to Use: You don’t need to do anything special; Angular does the work for you.

OnPush Strategy

• Manual Checks: Angular only checks a component if its inputs change, or if you explicitly mark it (with markForCheck() or via signals).
• Why OnPush? It’s often used in large or performance-critical apps to avoid unnecessary checks.

How Angular Batches Changes (Coalescing)

Coalescing is Angular’s way of batching multiple change detection triggers that happen close together into a single detection cycle:

• When multiple events occur close together, Angular waits until the next browser repaint to perform a single change detection pass.
• Instead of running a check for every event, Angular merges them all into one pass.
• This coalescing mechanism reduces redundant checks and boosts overall performance.

How Angular Updates the DOM

• DOM as a Tree: Each HTML element is a node in the DOM tree.
• Component Tree: In Angular, each component also forms a node in an internal tree.
• Traversal: During change detection:

1. Global Change Detection: If using the Default Strategy or a component is marked dirty, Angular checks it (and often its children).
2. Targeted Change Detection: For OnPush, Angular checks only components explicitly marked as dirty or whose inputs changed.

By working through this component tree, Angular knows where to apply updates in the DOM, ensuring your UI always reflects current data.

Putting It All Together

• Zone.js catches asynchronous events automatically.
• OnPush Strategy and manual triggers like markForCheck() or signals() give you control in performance-critical scenarios.
• Coalescing ensures Angular doesn’t waste time on repeated checks that happen in quick succession.