CODEWITHSUNDEEP
javascripthtmlangulartypescriptdom
Melek Damak
Melek Damak

Reputation: 43

Angular 7 add innerHTML dynamically binding

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.

Upvotes: 0

Views: 1586

Answers (1)

Abhishek Priyadarshi
Abhishek Priyadarshi

Reputation: 581

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

Upvotes: 1

Related Questions