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](https://stackoverflow.com/questions/31548311/angular-html-binding) — The Hungry Dictator, Apr 19 '18 at 08:30

The Hungry Dictator · Accepted Answer · 2018-04-19T08:55:02.820

12

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 '18 at 08:55

answered Apr 19 '18 at 08:28

The Hungry Dictator

3,444
5
37
53

What if HTML string got – Angulandy2 Apr 19 '18 at 08:49
what are you getting right now ? I think It will work but I doubt that the code under the tag won't work – The Hungry Dictator Apr 19 '18 at 08:52
Now i am using
. My navSrv.html is .html document with lot's of javascript code. I get javascript as a string. – Angulandy2 Apr 19 '18 at 08:53
Check my updated answer. May be you will get your answer. – The Hungry Dictator Apr 19 '18 at 08:55
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; } – Angulandy2 Apr 19 '18 at 08:57
Have you given ID to div? – The Hungry Dictator Apr 19 '18 at 09:07
Yes, now I called this function on ngOnInit, thats why I got undefines. When I call it with a button it works, but there is another problem , maby we can go in chat ? – Angulandy2 Apr 19 '18 at 09:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169313/discussion-between-the-dictator-and-andrius-la). – The Hungry Dictator Apr 19 '18 at 09:12
@Angulandy2 Have you got the technique to run the script within innerHTML?? If yes can you please let me know the process to run the script – Harika Feb 18 '20 at 04:21

score 1 · Answer 2 · answered Apr 19 '18 at 08:27

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 '18 at 08:27

Swoox

3,707
2
21
32

Omg.. 2 hours for this?? Hate when this happens. Thank you – Angulandy2 Apr 19 '18 at 08:28
what if in that html is – Angulandy2 Apr 19 '18 at 08:43

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

Hello

2 Answers2