How to expose angular 2 methods publicly?

by

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');})

More Related Contents:

  1. typescript anonymous object with variable based label value
  2. How to pass parameters rendered from backend to angular2 bootstrap method
  3. CORS Error: “requests are only supported for protocol schemes: http…” etc
  4. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  5. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  6. Using http rest apis with angular 2
  7. Angular 2: How to detect changes in an array? (@input property)
  8. Angular 2 optional route parameter
  9. Angular 2: import external js file into component
  10. What is #auto attribute here and why it is required
  11. Angular app has to clear cache after new deployment
  12. Module not found: Error: Can’t resolve ‘crypto’
  13. updating variable changes in components from a service with angular2
  14. How to handle window scroll event in Angular 4?
  15. Angular 2 – Check if image url is valid or broken
  16. Angular 2 Material 2 datepicker date format
  17. Angular 2 Component @Input not working
  18. Highlight the search text – angular 2
  19. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  20. Dynamic template in templatURL in angular2
  21. How to loop over object properties with ngFor in Angular
  22. Converting an image to base64 in angular 2
  23. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  24. Ionic 4 Events not working in device but working on browser
  25. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  26. Angular 2 AuthGuard Service with redirect?
  27. Observable.forkJoin with a for loop
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment