What is NgZone in Angular?

NgZone is a service in Angular used for managing execution zones (execution context) and triggering change detection. It's based on zone.js library and allows Angular to track all asynchronous operations, such as setTimeout, Promise, XHR, etc.

Why NgZone?

Angular uses NgZone to:

• automatically trigger change detection after asynchronous operations complete;
• track external events (e.g., click, HTTP, setTimeout);
• allow performance optimization by manually managing change detection triggering.

How NgZone Works

When asynchronous event occurs (e.g., setTimeout, fetch, input), Angular automatically:

1. Enters NgZone;
2. Executes asynchronous task;
3. After completion — calls Change Detection to update UI.

Example

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-zone-demo',
  template: `<p>{{progress}}%</p>`
})
export class ZoneDemoComponent {
  progress = 0;

  constructor(private ngZone: NgZone) {}

  startProgress() {
    this.progress = 0;
    this.increaseProgress();
  }

  // Without exiting zone — will trigger change detection every step
  increaseProgress() {
    if (this.progress < 100) {
      setTimeout(() => {
        this.progress += 1;
        this.increaseProgress();
      }, 10);
    }
  }
}

What If We Exit Zone?

Sometimes you don't need to trigger change detection too often. In this case you can use runOutsideAngular():

this.ngZone.runOutsideAngular(() => {
  this.progress = 0;
  const timer = setInterval(() => {
    this.progress += 1;

    if (this.progress >= 100) {
      clearInterval(timer);

      // Return back to Angular zone to update UI
      this.ngZone.run(() => {
        console.log("Completed!");
      });
    }
  }, 10);
});

• runOutsideAngular() — runs code outside Angular zone, so change detection is not triggered every time.
• run() — manually return to Angular context and initiate UI update.

Summary