Angular typescript how to convert string to html object and pass it to variable

Question

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 ?

Possible duplicate of Angular HTML binding

The Hungry Dictator
– The Hungry Dictator

2018-04-19 08:30:18 +00:00
Commented Apr 19, 2018 at 8:30 — The Hungry Dictator
– The Hungry Dictator, Commented Apr 19, 2018 at 8:30

The Hungry Dictator · Accepted Answer · 2018-04-19 08:55:02Z

13

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

edited Apr 19, 2018 at 8:55

answered Apr 19, 2018 at 8:28

The Hungry Dictator

3,4845 gold badges41 silver badges56 bronze badges

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

9 Comments

Angulandy2 Over a year ago

What if HTML string got <script> in it, and I only see js as a string with [innerHTML].

The Hungry Dictator Over a year ago

what are you getting right now ? I think It will work but I doubt that the code under the tag won't work

Angulandy2 Over a year ago

Now i am using <div [innerHtml]="navSrv.html"></div> . My navSrv.html is .html document with lot's of javascript code. I get javascript as a string.

The Hungry Dictator Over a year ago

Check my updated answer. May be you will get your answer.

Angulandy2 Over a year ago

I get error "Cannot read property 'nativeElement' of undefined" . I wrote in a class : @ViewChild('html') html: ElementRef; loadHtml(){ this.html.nativeElement.innerHTML = this.navSrv.html; }

|

Swoox · Accepted Answer · 2018-04-19 08:27:09Z

1

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

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

answered Apr 19, 2018 at 8:27

Swoox

3,7602 gold badges23 silver badges32 bronze badges

2 Comments

Angulandy2 Over a year ago

Omg.. 2 hours for this?? Hate when this happens. Thank you

Angulandy2 Over a year ago

what if in that html is <script> tag where js is written ? I get js as a string.

Collectives™ on Stack Overflow

Angular typescript how to convert string to html object and pass it to variable

Hello

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Hello

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related