Wsrtjtyk

Using Angular 2 I've created an application that needs to load an external html, to achieve this I did a simple node api to serve the external html and finally render this external file into my angular 2 application. This is what I want, that works perfectly.

app.component.html

<main>

  <h1>Hi, from the container</h1>

  <test-component></test-component> <!-- The external html -->

<main>

myExternalFile.html

<main>

  <h2>Hi, Im the external file</h2>

</main>

test.component.ts

import { Component, Input, Pipe } from '@angular/core';

import { Http } from '@angular/http';

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';



@Component({

  selector: 'test-component',

  template: `<div [innerHTML]="myExternalHTML"></div>`

})

export class TestComponent {



  myExternalHTML: any = "";



  constructor(http: Http, private sanitizer: DomSanitizer ) {

    http.get('http://localhost:5000/api/v1/todos') // my basic node app

      .subscribe((response: any) => {

        const externalHTML= 

        this.sanitizer.bypassSecurityTrustHtml(response.text());

        this.myExternalHTML= externalHTML;

      }, (error: any) => {

        console.log('Error: ' + error);

      })

  }



}

So this works, after that I can see the html loaded without any problem. Now I need to add a button with an action that will be processed on the angular2 container.

Like adding a button in the external html (myExternalFile.html)

<main>

  <h2>Hi, Im the external file</h2>

  <button (click)="hi()">say hi!</button>

</main>

And adding the method (test.component.ts)

import { Component, Input, Pipe } from '@angular/core';

import { Http } from '@angular/http';

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';



@Component({

  selector: 'test-component',

  template: `<div [innerHTML]="myExternalHTML"></div>`

})

export class TestComponent {



  myExternalHTML: any = "";



  constructor(http: Http, private sanitizer: DomSanitizer ) {

    http.get('http://localhost:5000/api/v1/todos') // my basic node app

      .subscribe((response: any) => {

        const externalHTML= 

        this.sanitizer.bypassSecurityTrustHtml(response.text());

        this.myExternalHTML= externalHTML;

      }, (error: any) => {

        console.log('Error: ' + error);

      })

  }



// New method

hi() {

  console.log('we made connection!')

}



}

But, I'm not getting any message on my console. How can I stablish this kind of connection? since everything is already compiled... adding and external file in this ways makes me thing more about this kind of communication.

<main>

  <h2>Hi, Im the external file</h2>

  <button id="mybtn" (click)="hi()">say hi!</button>

</main>

app.component.ts

import { Component, Input, Pipe } from '@angular/core';

import { Http } from '@angular/http';

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';



@Component({

  selector: 'test-component',

  template: `<div [innerHTML]="myExternalHTML"></div>`

})

export class TestComponent {



  myExternalHTML: any = "";



  constructor(http: Http, private sanitizer: DomSanitizer ) {

    http.get('http://localhost:5000/api/v1/todos') // my basic node app

      .subscribe((response: any) => {

        const externalHTML= 

        this.sanitizer.bypassSecurityTrustHtml(response.text());

        this.myExternalHTML= externalHTML;

      }, (error: any) => {

        console.log('Error: ' + error);

      })

  }



ngAfterViewInit(){

let el = document.getElementById('mybtn') as HTMLElement;

el.click();

}

// New method

hi() {

  console.log('we made connection!')

}



}