1

I am trying to trigger an angular component method when i click on an html button which is located inside a separate plain HTML file in the 'src' folder in the same project.

I tried different ways through NgZone, callback function, etc but the angular component method is not firing.

James Z
  • 12,209
  • 10
  • 24
  • 44
Ajay Sr
  • 11
  • 3
  • 1
    What connection does a _separate plain HTML file in the 'src' folder_ have to Angular? How is it included in your SPA? – Randy Casburn Mar 02 '19 at 20:41

3 Answers3

0

simple custom event seems to be helpful

//   in component  
document.addEventListener('myEvent',()=>{
  console.log('here it is')
});

// in js file
var event = new Event('myEvent');
document.dispatchEvent(event);
Katya Pavlenko
  • 3,303
  • 3
  • 16
  • 28
  • Thanks for your answer. I tried the way you suggested. But somehow am not seeing the event getting triggered when i click on button click in html file. I have included the below code in button click event of the html file var event = new Event('myEvent'); document.dispatchEvent(event); Then I have included the below code in the constructor and nginit() of the xxxxx.component.ts file document.addEventListener('myEvent',()=>{ console.log('here it is') }); But still I see the event is not getting triggered when button click in html file. Plz let me know if m missing anything – Ajay Sr Mar 04 '19 at 07:51
  • Please find the Stackblitz link below https://stackblitz.com/edit/angular-1ggxxv I have created stand alone editor.html under "src" folder which has html button for triggering angular method. In app.component.ts, I have included the eventListener in ngOnInit() method. In angular.json, I have included the stand alone file editor.html for running it independently – Ajay Sr Mar 05 '19 at 08:05
  • editor.html is another html page, you want it to communicate with index.html when open in two different tabs? – Katya Pavlenko Mar 05 '19 at 17:31
  • No, I want to communicate from "editor.html" to "app.component.ts". In "editor.html", I would be having button and iframe control. In Iframe src, i would be loading "app.component". Therefore during button (which is available in editor.html) click, I want to invoke a method defined in "app.component.ts" – Ajay Sr Mar 05 '19 at 19:49
  • here is what you are looking for https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site. Use postmessage instead of events – Katya Pavlenko Mar 08 '19 at 09:37
  • Thanks for your help, this is what I was looking for :) – Ajay Sr Mar 13 '19 at 12:36
0

I suppose you have an component named c1 and for this component you have an html file associated to it.

enter image description here

So, in your html file you need to add a button like that:

<button (click)="clickMe()"></button>

In your typescript file implement your method:

clickMe() { //your code here }
Amine Tabou
  • 36
  • 5
  • 1
    I'm not sure the OP is referring to a component template file due to: _a separate plain HTML file in the 'src' folder_ – Randy Casburn Mar 02 '19 at 21:03
  • @RandyCasburn Yes I agree with you, because there is no sense to create a new html file separated and execute a typescript code inside, we more clarifications – Amine Tabou Mar 02 '19 at 21:39
  • @Amine, We had this requirement to execute an angular component method from an external html/javascript file. Here HTML file is not the one which is available as part of the component. It is a separate stand alone file located in src folder of the same project – Ajay Sr Mar 04 '19 at 08:11
0

In your js file, throw event like below:

window.postMessage("Disconnected", "*")

And In your ts file, you can listen to that event like this:

ngOnInit() {
  window.onmessage = (e)=>{
    if (e.data == 'Disconnected') {
      alert("Yeah! it's working");
      //you can call any method here
    }
  };
}
Nouman Mukhtar
  • 329
  • 4
  • 6