Angular Change Detection — The Complete Architect Guide

Most Angular developers use change detection…
But very few truly understand how it works internally.

Let’s break it down 👇
**

What is Change Detection?

**

Change Detection is Angular’s mechanism to keep:

👉 UI (DOM) in sync with
👉 Application State (Data)

Whenever data changes → Angular updates the UI automatically.

How It Works

Angular maintains a component tree and performs:

➡️ Top-to-bottom traversal
➡️ Checks all bindings ({{}}, inputs)
➡️ Updates DOM if needed

This process is called the Change Detection Cycle

What Triggers It?

Angular relies on Zone.js to detect async operations like:

User events (click, input)
HTTP calls
setTimeout / setInterval
Promises

Once detected → Angular runs change detection.

Change Detection Strategies

1. Default Strategy

✔ Checks entire component tree
✔ Easy to use
❌ Can be slow in large apps

2. OnPush Strategy

✔ Runs only when:

Input reference changes
Event inside component
Observable emits

Advanced Techniques

You can manually control change detection:

detectChanges()
markForCheck()
detach() / reattach()

Modern Alternatives

Angular is evolving beyond traditional CD:

Signals (Angular 16+)

Fine-grained reactivity without full tree traversal

Zoneless Angular

Remove Zone.js for manual control

State Management (NgRx, Akita)

Push-based architecture reduces unnecessary checks