NgZone

An injectable service for executing work inside or outside of the Angular zone.

The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via #runOutsideAngular and if needed, these tasks can reenter the Angular zone via #run.

<!-- TODO: add/fix links to: - docs explaining zones and the use of zones in Angular and change-detection - link to runOutsideAngular/run (throughout this file!) -->

Example (live demo)

import {Component, View, NgZone} from 'angular2/core';
import {NgIf} from 'angular2/common';
 
@Component({
  selector: 'ng-zone-demo'.
  template: `
    <h2>Demo: NgZone</h2>
 
    <p>Progress: {{progress}}%</p>
    <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
 
    <button (click)="processWithinAngularZone()">Process within Angular zone</button>
    <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
  `,
  directives: [NgIf]
})
export class NgZoneDemo {
  progress: number = 0;
  label: string;
 
  constructor(private _ngZone: NgZone) {}
 
  // Loop inside the Angular zone
  // so the UI DOES refresh after each setTimeout cycle
  processWithinAngularZone() {
    this.label = 'inside';
    this.progress = 0;
    this._increaseProgress(() => console.log('Inside Done!'));
  }
 
  // Loop outside of the Angular zone
  // so the UI DOES NOT refresh after each setTimeout cycle
  processOutsideOfAngularZone() {
    this.label = 'outside';
    this.progress = 0;
    this._ngZone.runOutsideAngular(() => {
      this._increaseProgress(() => {
      // reenter the Angular zone and display done
      this._ngZone.run(() => {console.log('Outside Done!') });
    }}));
  }
 
 
  _increaseProgress(doneCallback: () => void) {
    this.progress += 1;
    console.log(`Current progress: ${this.progress}%`);
 
    if (this.progress < 100) {
      window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
    } else {
      doneCallback();
    }
  }
}