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.

Hello @MichaelD ,this question about attribut binding also, not only events. — Melek Damak
– Melek Damak, Commented Jul 23, 2021 at 10:58
The expression {{genericAttribut}} is called Angular interpolation and not attribute binding. For using interpolation in innerHTML, see here: stackoverflow.com/q/51275726/6513921 — Barremian
– Barremian, Commented Jul 23, 2021 at 11:19

Abhishek Priyadarshi · Accepted Answer · 2021-07-23 09:36:12Z

1

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

answered Jul 23, 2021 at 9:36

Abhishek Priyadarshi

5712 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Melek Damak Over a year ago

this.genericFunction is not a function

Collectives™ on Stack Overflow

Angular 7 add innerHTML dynamically binding

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related