Just make the component register itself in a global map and you can access it from there.
Use either the constructor or ngOnInit()
or any of the other lifecycle hooks to register the component and ngOnDestroy()
to unregister it.
When you call Angular methods from outside Angular, Angular doesn’t recognize model change. This is what Angulars NgZone
is for.
To get a reference to Angular zone just inject it to the constructor
constructor(zone:NgZone) {
}
You can either make zone
itself available in a global object as well or just execute the code inside the component within the zone.
For example
calledFromOutside(newValue:String) {
this.zone.run(() => {
this.value = newValue;
});
}
or use the global zone reference like
zone.run(() => { component.calledFromOutside(newValue); });
https://plnkr.co/edit/6gv2MbT4yzUhVUfv5u1b?p=preview
In the browser console you have to switch from <topframe>
to plunkerPreviewTarget....
because Plunker executes the code in an iFrame
. Then run
window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.callFromOutside('1');})
or
window.angularComponentRef.zone.run(() => {window.angularComponentRef.componentFn('2');})