Angular 7 add innerHTML dynamically binding

Question

I am trying to set up a system which loads the html page from a stored html file and renders it with angular. How to bind property and event in this file, I'm trying to inject it with innerHTML.

ParentComponent.ts

genericAttribut ="Hello"

getHtmlContent(){
    id =1;
    this.service.getHtmlContent(id).subscribe((data)=>
    myTemplate =data;
});
}  
genericFunction(){
console.log("fire");
}

ParentComponent.html

<div [innerHTML]="myTemplate | safeHtml"></div>

Template-1.html

<button (click)="genericFunction()">{{genericAttribut}}</button>

When i try this, angular don't do the binding.

Possible duplicate: https://stackoverflow.com/a/37676847/6513921 — ruth, Jul 23 '21 at 09:31
Hello @MichaelD ,this question about attribut binding also, not only events. — Melek Damak, Jul 23 '21 at 10:58
The expression `{{genericAttribut}}` is called Angular [interpolation](https://angular.io/guide/interpolation) and not attribute [binding](https://angular.io/guide/attribute-binding#binding-to-an-attribute). For using interpolation in `innerHTML`, see here: https://stackoverflow.com/q/51275726/6513921 — ruth, Jul 23 '21 at 11:19

score 1 · Answer 1 · answered Jul 23 '21 at 09:36

Template-1.html

<button id="buttonId">Button Name</button>

ParentComponent.ts

getHtmlContent(): void {
    id = 1;
    this.service.getHtmlContent(id).subscribe((data) => {
      myTemplate = data;

      // Call this after updating innerHtml content
      setTimeout(() => {
        let buttonElement = document.querySelector('#buttonId');
        if(buttonElement) {
          buttonElement.addEventListener('onclick', (event) => {
            this.genericFunction();
          })
        }
      }, 1000)
    });
  }
  genericFunction() {
    console.log("fire");
  }

Related Angular 2 innerHTML (click) binding

this.genericFunction is not a function – Melek Damak Jul 26 '21 at 14:01 — Melek Damak, Jul 26 '21 at 14:01

Angular 7 add innerHTML dynamically binding

1 Answers1