angular - How to add click event to dynamically added html element in typescript

Question

I'm building an app in angular 2. I want to add a click event to a dynamically added html element. I define a string (contentString), and in this string I define the html element.

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

This string is put inside a html element like this:

var boxText = document.createElement("div");
    boxText.innerHTML = contentString;

Although when I inspect the element, it has the click event defined, but it does not trigger.

on click it should console log

navigate() {
console.log("eeeehnnananaa");
}

But that does not work. Anyone a solution?

Answer 1

Angular processes the template when the component is compiled. HTML added later is not compiled anymore and bindings are ignored.

You can use

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  // assume dynamic HTML was added before
  this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this));
}