Listening for NgZone events

zone.js is a library that Angular 2 directly depends upon. It allows Angular to be built upon a zone that allows the framework to intimately manage its execution context.

More plainly, this means that Angular can tell when asynchronous things are happening that it might care about. If this sounds a bit like how $scope.apply() was relevant in Angular 1.x, you are thinking in the right way.

Angular 2's integration with zones takes the form of the NgZone service, which acts as a sort of wrapper for the actual Angular zones. This service exposes a useful API that you can tap into.

All that is needed for this recipe is a component into which the NgZone service can be injected:

[src/app/app.component.ts]      import {Component} from '@angular/core';      @Component({     selector: 'app-root',     template: ``   })   export class AppComponent {     constructor() {     }   }   

Begin by injecting the NgZone service into your component, which is made available inside the core Angular module:

[src/app/app.component.ts]      import {Component, NgZone} from '@angular/core';      @Component({     selector: 'app-root',     template: ``   })   export class AppComponent {     constructor(private zone:NgZone) {     }   }   

The NgZone service exposes a number of EventEmitters that you can attach to. Since zones are capable of tracking asynchronous activity within it, the NgZone service exposes two EventEmitters that understand when an asynchronous activity becomes enqueued and dequeued as microtasks.

The onUnstable EventEmitter lets you know when one or more microtasks are enqueued; onStable is fired when the the microtask queue is empty and Angular does not plan to enqueue any more.

Add handlers to each:

[src/app/app.component.ts]      import {Component, NgZone} from '@angular/core';      @Component({     selector: 'app-root',     template: ``   })   export class AppComponent {     constructor(private zone:NgZone) {       zone.onStable.subscribe(() => console.log('stable'));       zone.onUnstable.subscribe(() => console.log('unstable'));     }   }   

Terrific! However, the log output of this is quite boring. At application startup, you'll see that the application is reported as stable, but nothing further.

[src/app/app.component.ts]      import {Component, NgZone} from '@angular/core';      @Component({     selector: 'app-root',     template: `<button (click)="foo()">foo</button>`   })   export class AppComponent {     constructor(private zone:NgZone) {       zone.onStable.subscribe(() => console.log('stable'));       zone.onUnstable.subscribe(() => console.log('unstable'));     }        foo() {       setTimeout(() => console.log('timeout handler'), 1000);     }   }   

In order to obviate the necessity of a $scope.apply() construct, Angular needs the ability to intelligently decide when it should check to see whether the state of the application has changed.

In an asynchronous setting, such as a browser environment, this seems like a messy task at first. Something like timed events and input events are, by their very nature, difficult to keep track of. For example, refer to the following code:

element.addEventListener('click', _ => {     // do some stuff     setInterval(_ => {       // do some stuff     }, 1000);   });   

This code is capable of changing the model in two different places, both of which are asynchronous. Code such as this is written all the time and in so many different places; it's difficult to imagine a way of keeping track of such code without sprinkling something like $scope.$apply() all over the place.