Angular Academy · Lesson

How Change Detection Works

Understand Angular's change detection cycle.

Lesson 1 of 413 steps

How Change Detection Works is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “How Change Detection Works” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “How Change Detection Works”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

← Back to Angular Academy