click action in an innerhtml using angular4 not working

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.

What are you getting? also, you are telling `[innerHTML]` to interpret `'myText'`as a string because it is wrapped in single quotes — Derek Pollard, Jun 12 '18 at 04:46
`'myText' | translate` should be changed to: `myText | translate` — Derek Pollard, Jun 12 '18 at 04:50
@Derek it should be `myText | translate` because `translate` here is pipe — Pardeep Jain, Jun 12 '18 at 04:51
@Derek I am getting the translated html, but there is no click event. I mean on click nothing happens. — KRUSHANU MOHAPATRA, Jun 12 '18 at 05:07

score 5 · Accepted Answer · answered Jun 12 '18 at 05:07

5

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

answered Jun 12 '18 at 05:07

Pardeep Jain

84,110
37
165
215

3

That's very sad to hear. Thanks for the response. – KRUSHANU MOHAPATRA Jun 12 '18 at 05:11
@KRUSHANUMOHAPATRA No worries man, There are number of ways to solve one problem :) – Pardeep Jain Jun 12 '18 at 05:12
We just can use 'pointer-events: none;' in CSS for the div with innerHTML. – Ihor Khomiak Jun 06 '19 at 19:24

click action in an innerhtml using angular4 not working

1 Answers1

Linked

Related