click action in an innerhtml using angular4 not working [duplicate]

Question

I am trying to put an anchor tag in an innerHTML and I am using angular 4.

in HTML file: <div [innerHTML]="'myText' | translate">

in Component: const myText = "mytext go here and <a (click)='myFunction()'> click here </a>."

I am not getting the "(click)='myFunction()'" inside in the DOM.

Answer 1

This will not work, your code is fine but it's by design of Angular.

Whenever you pass some content via innerHTML, Angular is just going to render that content does not evaluate any expression or binding within that content like you did by adding a click event.

So In order to achieve this (as per your requirement), you can wrap your content into another component and pass data via @input property binding and display it into the browser.

For more detail you can read out here -

• Angular 2 innerHTML (click) binding