CODEWITHSUNDEEP
javascriptangulartypescriptjavascript-objects
Angulandy2
Angulandy2

Reputation: 806

Angular typescript how to convert string to html object and pass it to 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 :

enter image description here

What I want to get :

Hello

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

enter image description here

How to get htmlObject and use it as a variable ?

Upvotes: 4

Views: 35286

Answers (2)

The Hungry Dictator
The Hungry Dictator

Reputation: 3484

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);

Upvotes: 13

Swoox
Swoox

Reputation: 3740

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

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

Upvotes: 1

Related Questions