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
