Cannot able to bind value with element that inside the innerhtml

Question

External html file that is loading form server:

<h1>Name {{name}}</h1>

In sample.component.hmtl:

<div class="htmldata" [innerHtml]="htmlData"> 
</div>

In sample.component.ts:

name: any = 'sample text'
// download file from server
 downloadFile() {
    this.http.get(this.fileUrl, { responseType: 'text' }).subscribe(res => {
      this.htmlData = this.sanitizer.bypassSecurityTrustHtml(res);
      console.log(this.htmlData);
    });
  }

score 0 · Answer 1 · answered Mar 02 '20 at 15:42

0

To save your time: You can't bind a component attributes with an html given as a string to innerHtml.

You can find a more detailed answer: here

answered Mar 02 '20 at 15:42

myassir

76
4

Cannot able to bind value with element that inside the innerhtml

1 Answers1