What is Zone.js and what role does it play in Angular change detection?
Learn what Zone.js is and how it powers Angular change detection by patching async APIs, plus NgZone, runOutsideAngular, and the zoneless signals approach.
Expected Interview Answer
Zone.js is a library that monkey-patches asynchronous browser APIs so Angular knows when any async task finishes and can automatically trigger change detection to update the view.
Angular runs inside an NgZone, which is built on Zone.js. By intercepting timers, promises, DOM events, and XHR/fetch, Zone.js notifies Angular whenever such a task completes. Angular then runs change detection from the root component down, checking bindings and re-rendering what changed — so developers rarely have to call it manually. Modern Angular can also run zoneless using signals, which trigger change detection directly instead.
- Automatic change detection with no manual triggers
- Works transparently across timers, promises, and events
- Lets developers focus on logic, not view syncing
- NgZone.runOutsideAngular allows opting out for performance
- Provides a single, predictable point to react to async work
AI Mentor Explanation
Zone.js is like the third umpire monitoring every delivery from hidden cameras. The players never signal it directly, yet the moment a wicket, boundary, or run-out happens, the umpire notices and updates the official scoreboard. Angular is the scoreboard operator who only needs to know 'something happened' to refresh the totals for the crowd.
Step-by-Step Explanation
Step 1
Bootstrap inside a zone
Angular bootstraps the app within an NgZone instance built on top of Zone.js.
Step 2
Patch async APIs
Zone.js monkey-patches setTimeout, promises, addEventListener, XHR and fetch so it can observe them.
Step 3
Detect task completion
When a patched async task finishes, Zone.js emits an onMicrotaskEmpty/stable signal to NgZone.
Step 4
Trigger change detection
NgZone tells Angular's ApplicationRef to run change detection from the root component down.
Step 5
Update the DOM
Angular checks each binding, and re-renders only the parts of the view whose data changed.
What Interviewer Expects
- Knowing Zone.js monkey-patches async browser APIs
- Connecting Zone.js to NgZone and change detection
- Awareness of runOutsideAngular for performance
- Understanding of the zoneless/signals alternative
- Ability to explain why manual triggering is rarely needed
Common Mistakes
- Saying Zone.js does change detection itself instead of just notifying Angular
- Confusing NgZone with the Zone.js library
- Believing every async task always requires manual detectChanges
- Not knowing async tasks outside the zone won't trigger detection
- Ignoring the modern zoneless signal-based approach
Best Answer (HR Friendly)
“Zone.js is a helper that quietly watches for background activities like timers or clicks finishing, and tells Angular when something happened. Angular then refreshes the screen automatically, so developers don't have to manually update the view every time data changes.”
Code Example
import { Component, NgZone } from '@angular/core';
@Component({ selector: 'app-ticker', template: '{{ frames }}' })
export class TickerComponent {
frames = 0;
constructor(private zone: NgZone) {}
start() {
// Runs the loop without triggering change detection each frame
this.zone.runOutsideAngular(() => {
const loop = () => {
this.frames++;
requestAnimationFrame(loop);
};
loop();
});
}
}Follow-up Questions
- What is NgZone and how does it relate to Zone.js?
- When would you use runOutsideAngular?
- How does zoneless Angular with signals change detection work?
- Why might Zone.js hurt performance in some apps?
- How do OnPush components interact with Zone.js triggering?
MCQ Practice
1. What does Zone.js primarily do in an Angular app?
Zone.js patches asynchronous browser APIs so Angular knows when to run change detection.
2. Which method runs code without triggering Angular change detection?
runOutsideAngular executes work outside the zone, so Zone.js doesn't schedule change detection.
3. What modern Angular feature can replace Zone.js for change detection?
Signals let Angular run zoneless by triggering change detection directly when reactive state changes.
Flash Cards
What is Zone.js? — A library that monkey-patches async browser APIs so Angular can detect when to run change detection.
What is NgZone? — An Angular service built on Zone.js that signals the framework to run change detection when async tasks finish.
How do you skip change detection? — Run the code inside NgZone.runOutsideAngular so Zone.js won't schedule detection.
What replaces Zone.js in zoneless mode? — Signals, which trigger change detection directly when reactive values change.