I have a function witch gets html content from file as a string. After that I made it as a html object. I can clearly see it in my console that it works. How to pass it from a service to a div element ?

nav.service.ts :

html: string;
      public  getZipFileContent(urlPath:string, pathInZip:string, ) {
        getFileContentFromRemoteZip(urlPath, pathInZip, (content) => {
          console.log(content);
          let html = content; 
          let htmlObject = document.createElement('div');
          htmlObject.innerHTML = html;
          console.log(htmlObject);
          this.html = html; // it's a string
          this.html = htmlObject // error : can't asign string as HTMLdivElement
        });
      }
    }

What I get now by adding {{navSrv.html}} in my component :

What I want to get :

Hello

Console.log from : console.log(htmlObject);

How to get htmlObject and use it as a variable ?

I have a function witch gets html content from file as a string. After that I made it as a html object. I can clearly see it in my console that it works. How to pass it from a service to a div element ?

nav.service.ts :

html: string;
      public  getZipFileContent(urlPath:string, pathInZip:string, ) {
        getFileContentFromRemoteZip(urlPath, pathInZip, (content) => {
          console.log(content);
          let html = content; 
          let htmlObject = document.createElement('div');
          htmlObject.innerHTML = html;
          console.log(htmlObject);
          this.html = html; // it's a string
          this.html = htmlObject // error : can't asign string as HTMLdivElement
        });
      }
    }

What I get now by adding {{navSrv.html}} in my component :

What I want to get :

Hello

Console.log from : console.log(htmlObject);

How to get htmlObject and use it as a variable ?

• javascript
• angular
• typescript
• javascript-objects

• Possible duplicate of Angular HTML binding – The Hungry Dictator Commented Apr 19, 2018 at 8:30

2 Answers 2

you can do it like follow if you want it in div only then

<div [innerHtml]="navSrv.html"></div>

Apart from this you can also do it like below :

<div #divID ></div>

And then bind it like this way

@ViewChild('divID') divID: ElementRef;

loadHtml(){
    this.divID.nativeElement.innerHTML = this.html;
}

The second part is useful when the html string is very much large.

EDIT

As your requirement if you have <script> tag then you can do if as follows

const element = document.createRange().createContextualFragment(this.html);
this.divID.appendChild(fragment);

For this you can use innerHTML it will make sure your html will be shown correctly:

<div [innerHTML]="navSrv.html"></div>