Angular 2 How to get Angular to detect changes made outside Angular?
You can do this by exporting NgZone
inside your Angular app.Usually, you should do all things inside Angular, but if you really want to execute your logic out of Angular, you need to get the right zone
, as you have said.
This trick is abusing Angular's dependency injection and hooking the injected zone
on window
object, as this issue shows. Declaring a dependency on NgZone
, and assigning it to window.zoneImpl
for exporting.
//our root app componentimport {Component, NgZone} from 'angular2/core'@Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> </div> `,})export class App { constructor(zone: NgZone) { this.name = 'Angular2' window.app = this window.zoneImpl = zone }}
After Angular bootstrapping, you should have a zoneImpl
global variable. You can use the run
method to kick Angular off.
zoneImpl.run(() => window.app.name = "new name!")