Example
runOutsideAngular can be used to run code outside Angular 2 so that it does not trigger change detection unnecessarily. This can be used to for example run multiple HTTP request to get all the data before rendering it. To execute code again inside Angular 2, run method of NgZone can be used.
my.component.ts
import { Component, OnInit, NgZone } from '@angular/core';
import { Http } from '@angular/http';
@Component({...})
export class Mycomponent implements OnInit {
private data: any[];
constructor(private http: Http, private _ngZone: NgZone) { }
ngOnInit() {
this._ngZone.runOutsideAngular(() => {
this.http.get('resource1').subscribe((data1:any) => {
// First response came back, so its data can be used in consecutive request
this.http.get(`resource2?id=${data1['id']}`).subscribe((data2:any) => {
this.http.get(`resource3?id1=${data1['id']}&id2=${data2}`).subscribe((data3:any) => {
this._ngZone.run(() => {
this.data = [data1, data2, data3];
});
});
});
});
});
}
}
