(click) event not work in innerHtml string Angular 4

Question

My function isn't called when I click the <a... tag.

I have the following code in my component:

public htmlstr: string;
public idUser:number;

this.idUser = 1;
this.htmlstr = `<a (click)="delete(idUser)">${idUser}</a>`;

public delete(idUser){
    alert("id " + idUser);
}

My html

<div [innerHTML]="htmlstr"></div>

but the function delete isn't called and does not show the alert.

The <div... is created dynamically

Answer 1

If anyone face same issue and above all answer not working then try my trick :

In HTML :

<button onclick="Window.myComponent.test()"> test </button>

In component :

class 
  constructor(){
    Window["myComponent"] = this;
  }


  test(){
    console.log("testing");
  }

Answer 2

Your main issue here, on-top of the things pointed out by @Matt Clyde and @Marciej21592, is that you're trying to dynamically add HTML code that needs to be compiled before it can be used (you're trying to bind to a method and variable).

Some ways of doing this can be seen here.

From the code you have supplied, however, there are much easier ways to accomplish what you are after. For starters, I would have that code in the HTML to begin with and hide/show it as needed with ngIf.

Answer 3

i use this method and its work

public htmlstr: string;
public idUser:number;

this.idUser = 1;
this.htmlstr = `<a id='innerHtmlClick'>${idUser}</a>`     
        this.htmlstr.querySelector(`innerHtmlClick`).addEventListener('click', () => {
        this.delete(idUser);
      });

public delete(idUser){
    alert("id " + idUser);
}

EventListener listen the event bye using id of innerHtml