Displaying HTML String in div using innerHtml

Question

I need to display raw HTML string using a div. I am assigning the HTML string to the innerHTML of a div like below

<div [innerHTML]="rawHTMLString">
</div>

However if the html string contains multiline comments or inline styles they too are displayed as text. See the issue on Stack Blitz here.

Expected functionality is that the comments and inline style blocks should not be displayed. This is how it should be rendered.

Expected result

All the previous answers on Stack Overflow point to using div innerHTML. I know I am missing something trivial here, but I can't seem to figure out. Thanks in advance for the help.

And you are dynamically loading/feeding the string? That is - you can't directly control the contents of the string? — nemanja
– nemanja, Commented Nov 30, 2018 at 1:03
You could try sanitizing the HTML string, as explained in this answer. — Martin Parenteau
– Martin Parenteau, Commented Nov 30, 2018 at 1:04
Yes. The string is auto generated from the server by a third party. So no control over the string generation. — Alvin Saldanha
– Alvin Saldanha, Commented Nov 30, 2018 at 1:05

Sajeetharan · Accepted Answer · 2018-11-30 01:07:27Z

4

Use DomSanitizer

  safeHtml(html) {
    return this._sanitizer.bypassSecurityTrustHtml(html);
  }

and in template,

  <div [innerHTML]="safeHtml(rawHTMLString)"></div>

STACKBLITZ DEMO

answered Nov 30, 2018 at 1:07

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Displaying HTML String in div using innerHtml

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related