HeadlinesBriefing favicon HeadlinesBriefing.com

Angular Zone.js Change Detection Explained

DEV Community •
×

Angular’s change detection historically depended on Zone.js, a library that intercepts asynchronous operations by creating execution contexts. It monkey-patches browser APIs like setTimeout, fetch, and DOM events to track task lifecycles. This allows Angular to know when async work starts and finishes, scheduling change detection automatically after events, HTTP responses, or timers.

When an Angular app bootstraps, it creates a special NgZone that wraps all application code. Zone.js overrides native APIs globally, wrapping callbacks to schedule macrotasks. After each async operation, Zone.js notifies Angular via onMicrotaskEmpty, triggering the framework to traverse the component tree and perform dirty checking, updating the DOM only where values have changed.

This mechanism made Angular's UI updates feel magical, but it introduced complexity and performance overhead. The framework has since evolved toward zoneless change detection using signals and explicit change tracking. Understanding Zone.js remains crucial for debugging legacy apps and appreciating modern Angular's architectural shifts toward explicit state management.