0

I tried to insert some HTML in a page using [innerHTML] but somehow my binded js functions won't work after insert. I tried with sanitizer as well since I though it's a "safe html" problem and I still think it is but I can't figure out what m I missing.

The HTML I try to insert:

`<div class="day" (click)="test()">
     <span class="day-date pl-3">${dayCount} </span>
     <span class="day-ocupacy"></span>
</div>`

The HTML in page with DomSanitizer

<div class="day" (click)="test()">
                            <span class="day-date pl-3">1 </span>
                            <span class="day-ocupacy"></span>
</div>

The HTML in page without DomSanitizer

<div class="day">
                            <span class="day-date pl-3">1 </span>
                            <span class="day-ocupacy"></span>
</div>

The test() method just alerts a message. But when I click the element the alert won't trigger.

What do I missed?

Thanks

Alex Florin Ciuciulete
  • 73
  • 5
  • You can't bind functions to the component from inside innerHTML, you'd have to look at doing it some other way. Have a look at this answer - https://stackoverflow.com/questions/37676726/angular-2-innerhtml-click-binding – Luke.T Jul 08 '21 at 13:39

0 Answers0