Angular - InnerHtml with styles

Question

I've this...

const htmlVar = "<html>
<div style="display:flex">
<div>
  <h1>Hello World</h1>
</div>
</div>
";

and on my html I've this..

 <div [innerHtml]="htmlVar"></div>

It's render everything, but the style :(

I attempted the solution of this link: style not working for innerhtml in Angular 2 Typescript

but it's not working. Maybe because it's too old.

Any clue ?

A div can't contain a head or body, that's invalid HTML — Liam
– Liam, Commented Aug 15, 2019 at 13:49
yes, @Liam..Just edited...but it's not the issue. Still continues — Marco Jr
– Marco Jr, Commented Aug 15, 2019 at 13:58

Andriy · Accepted Answer · 2019-08-15 14:28:08Z

4

As @R.Richards mentioned, use DomSanitizer:

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.
.
.
htmlVar: SafeHtml;

constructor(protected _sanitizer: DomSanitizer) {
  this.htmlVar = this._sanitizer.bypassSecurityTrustHtml(`
    <html>
      <head></head>
      <body>
        <div style="display:flex; color: red;">
          <div>
            <h1>Hello World</h1>
          </div>
        </div>
      </body>
    </html>`);
}

I created a stackblitz to illustrate

Also, as @liam already mentioned you should not have <html>, <header>, or <body> tags as DIV's children

edited Aug 15, 2019 at 14:28

answered Aug 15, 2019 at 14:01

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Angular - InnerHtml with styles

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