Execution outside the Angular zone

The utility of zone.js is terrific, since it works automatically, but a seasoned software engineer knows this often comes at a price. This is especially true when the concept of data binding comes into play.

In this recipe, you'll learn how to execute outside the Angular zone and what benefits this affords you.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/3362/.

How to do it...

To compare execution in different contexts, create two buttons that run the same code in different zone contexts. The buttons should count to 100 with setTimeout increments. Use the performance global to measure the time it takes:

[src/app/app.component.ts] 
 
import {Component, NgZone} from '@angular/core'; 
 
@Component({ 
  selector: 'app-root', 
  template: ` 
    <button (click)="runInsideAngularZone()"> 
      Run inside Angular zone 
    </button> 
 ...