How to communicate and external HTML with angular 2 container app

Question

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.

Answer 1

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

}