The angular pipe does not work, so the style is not applied

Question

The CSS defined in the HTML set by innerHtml is not reflected.

I tried to use bypassSecurityTrustHtml with pipe, but it doesn't work.
https://stackoverflow.com/a/59569667/3717426

How can styles be applied appropriately?

working

<h1>Normal</h1>
<div class="navbar-brand mx-auto title">Test<br class="br-sp" />(Test)</div>

not working

<h1>innerHTML</h1>
<div class="navbar-brand mx-auto title" [innerHTML]="title | safeHtml"></div>

See stackblitz for the source.

score 2 · Accepted Answer · answered Feb 03 '20 at 10:03

You need to update the ngModule of your component of add ViewEncapsulation setted to None.
With default Emulated state, you component can't access to the styles with innerHtml.

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: "app-head",
  templateUrl: "./head.component.html",
  styleUrls: ["./head.component.scss"],
  encapsulation: ViewEncapsulation.None,
})

The angular pipe does not work, so the style is not applied

1 Answers1