Angular's Default Change Detection with Zone.js

Why it exists

Applications need a way to automatically reflect data changes in the UI. Manually triggering updates for every state change is error-prone and tedious. Zone.js was adopted by Angular to solve this by observing the common triggers for state changes: asynchronous operations.

The mental model

Think of Zone.js as a building-wide alarm system. It wires itself into every potential source of an event: every click handler, every timer, every network request. When any of these events completes, the alarm sounds. Angular, hearing the alarm, doesn't know where the event came from, so it dispatches a team to check every single room (component) from top to bottom to see if anything has changed.

How it works

Zone.js works by "monkey-patching" nearly all asynchronous APIs in the browser, such as setTimeout, Promise.then, and event listeners. When your Angular application starts, it runs inside a special "Angular zone." When any of these patched async operations completes, the zone notifies Angular that something happened. In response, Angular initiates its default change detection cycle: it walks the entire component tree from the root downwards. For every component, it re-evaluates all template expressions and compares their current values to their previous values. If a value has changed, Angular updates the corresponding part of the DOM.

When to use it

This is Angular's default behavior, making it suitable for smaller applications or for rapid prototyping. The main advantage is simplicity. You can update a component's property from anywhere—an event handler, a timer, an HTTP response—and trust that the UI will update automatically without any extra code.

When not to use it

Avoid relying on the default strategy in large or performance-sensitive applications. The "check everything" approach becomes a major bottleneck as your component tree grows. A single button click can trigger checks across hundreds of components, most of which are unaffected, leading to UI lag. This is the primary reason developers adopt the OnPush change detection strategy.

One canonical example

A component has a button that, when clicked, fetches user data from an API. The click handler calls a service that returns an Observable. When the data arrives, a property on the component is updated. Because the underlying network request is patched by Zone.js, its completion notifies Angular. Angular then runs change detection, sees the component's property has changed, and updates the DOM to display the new user data, all automatically.