How Change Detection Works
Understand Angular's change detection cycle.
How Change Detection Works is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Change Detection?
Change detection is the process Angular uses to keep the DOM in sync with your component state. When data changes, Angular re-evaluates bindings and updates only what differs.
The Detection Cycle
Angular walks the component tree from the root down, checking each component's bindings. This top-down pass is one change detection cycle (tick).
What Triggers a Tick?
By default, Angular runs change detection after async events: DOM events, timers, and HTTP responses. This is coordinated by Zone.js.
Zone.js
Zone.js monkey-patches async APIs (setTimeout, addEventListener, Promise, XHR) so Angular knows when one finishes and a tick may be needed.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone wraps Zone.js for Angular. You can run code outside Angular's zone to avoid triggering change detection for hot loops.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});Re-entering the Zone
To update the UI from outside the zone, re-enter it with run so Angular schedules a tick.
this.zone.run(() => {
this.ready = true;
});Default Strategy
With the default strategy, every component is checked on each tick. This is simple and safe but can be wasteful in large trees.
Binding Comparison
Angular compares each binding's current value to its previous value using Object.is. If unchanged, the DOM is not touched.
Expressions Should Be Pure
Template expressions run on every check, so they must be fast and side-effect free. Avoid calling expensive functions directly in templates.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
In dev mode Angular runs a second verification pass. If a value changed between passes you get ExpressionChangedAfterItHasBeenCheckedError, signaling state mutated during rendering.
Manual Control
Inject ChangeDetectorRef to control detection: markForCheck(), detectChanges(), and detach() give fine-grained control.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();Quick Check
Test your understanding of change detection.
Recap
You learned that change detection is a top-down tree pass that syncs state to the DOM, triggered by async events via Zone.js/NgZone, comparing bindings with Object.is. ChangeDetectorRef gives manual control.
Frequently asked questions
Is the “How Change Detection Works” lesson free?
Yes — the full text of “How Change Detection Works” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “How Change Detection Works”?
Understand Angular's change detection cycle. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “How Change Detection Works” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- How Change Detection Works
- OnPush Change Detection
- Zoneless Angular
- Optimizing Lists and Rendering