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 ?

Consider using the [DomSanitizer](https://angular.io/api/platform-browser/DomSanitizer) to get this to work. — R. Richards, Aug 15 '19 at 13:46
A `div` can't contain a `head` or `body`, that's invalid HTML — Liam, Aug 15 '19 at 13:49
yes, @Liam..Just edited...but it's not the issue. Still continues — Marco Jr, Aug 15 '19 at 13:58

Andriy · Accepted Answer · 2019-08-15T14:28:08.733

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

Angular - InnerHtml with styles

1 Answers1