Angular 6 - call Angular function from external js file

Question

Recently I'm rewriting a plan JS app with Angular 6.

The old stuff work like this:

file js inside a iframe that call "parent.update_track()" function defined into main.js file into iframe container.

that's not work in Angular when app run on production, the response is: TypeError: parent.update_track is not a function.

so how can I call this function "update_track()" declared into a ts file in a component from an external js file contained into iFrame?

of course this should be the answer [https://stackoverflow.com/questions/35276291/how-to-expose-angular-2-methods-publicly](https://stackoverflow.com/questions/35276291/how-to-expose-angular-2-methods-publicly) — BobbyLinux, Sep 01 '18 at 09:54

score 3 · Accepted Answer · answered Aug 30 '18 at 13:03

You can use post message functionality.

So in your iframe you can just call the opener window (the parent) to post message, for more info you can use this reference

Then in the angular app (the parent) you can use the following listener:

@HostListener('window:message',['$event'])
onMessage(e) {
  if (e.origin!="http://localhost:4200") {
     return false;
  }

  alert('here i am');
}

}

Note: you should change the e.origin test to support both local env and production.

1 Answers1