How to prevent html code get cleared when add the function call

Question

I am getting html from backend with function added in a link. when I add the same html to my element as innerHTML the function is cleared. how to prevent that?

here is the sample code what i get from backend:

"Cookies help us provide a seemless experience to our dear customers. You agree to our usage of cookies by using our site. 
<a  href=\"#\" (click)=\"openPopupLink('footer.label.3.termsOfUse.desc')\">View Terms and Conditions</a>"

In the above there is function in the a element, but when add this value in to one of the div as:

[innerHTML] - the function "openPopupLink('footer.label.3.termsOfUse.desc') - missing. what is the correct way to handle this?

my output gives just this: <a href="#">View Terms and Conditions</a>

UPDATE

<div class="popup-overlay" [ngClass]=popConditionalClass [hidden]=showPopup (click)="eventLayerClick()"></div>
<div class="popupDesc" [ngClass]=popConditionalClass [hidden]=showPopup>
    <header>
        <a class="modal-pop-close-btn" (click)="hidePopup(); $event.stopPropagation();" name="close"></a>
        <h2 [innerHTML]="title"></h2>
    </header>
    <section [innerHTML]=htmlContent></section>
    <footer></footer>
</div>

Hi, would you mind expanding the code so we can see more of the context of where this is being added? It's unclear as to how this being added to your webpage to me. — Gerik, Jun 18 '18 at 03:02
@gerik I am adding this value to one of the popup. please see my updated code. In the section i add this html what i get from backend — user2024080, Jun 18 '18 at 03:03
In old angularJs you have to recompile the element if you want to add event-listeners and bindings dynamically like this. I'm sure something similar is the problem here. Maybe this can give you an idea: https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2 — ippi, Jun 18 '18 at 03:08
FYI: if this is the exact code you're using, you're also missing "\" in title section. — Gerik, Jun 18 '18 at 03:10
If possible, it's almost certainly a better idea to try to bind specific data instead of entire html-snippets. Like `
{{description}}
View Terms and Conditions.` I realize it's not always an option, but it had to be said. I think you are asking for trouble with the current setup. Especially binding `(click)` from [innerHTML] will give you an headache. Maybe fallback on non-angular onclick="" if you absolutely have to do it this way. — ippi, Jun 18 '18 at 03:19
Or try to add a click-listener dynamically: https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2 — ippi, Jun 18 '18 at 03:27

How to prevent html code get cleared when add the function call

0 Answers0