5

I've tried to render a raw HTML using innerHTML, as bellow: 

 <span *ngIf="displacyHTML " [innerHTML]="displacyHTML"></span>

This HTML has style in line, but it does not work in that way.

The HTML is rendered, but the style does not.

If I paste the same raw HTML into a separate file it works perfectly.

The styles I mention is used basically to change the background color of the mark tags.

ArthurS
  • 137
  • 1
  • 2
  • 5
  • Please include in the question an example of "raw HTML" that does not work. – ConnorsFan Jan 02 '20 at 19:01
  • Does this answer your question? [style not working for innerhtml in Angular 2 Typescript](https://stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-angular-2-typescript) – Wai Ha Lee Jan 02 '20 at 19:34
  • I solve the problem reloading the component with the new html + css. Apparently the innerHTML does not load the CSS with the HTML... I do not know exactly why. – ArthurS Jan 02 '20 at 20:20

1 Answers1

6

Potentially, you need a SafePipe for your html as your browser does not trust injected html code: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'safePipe'})

export class safePipe implements PipeTransform  {

constructor(protected sanitizer: DomSanitizer):{}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

usage in HTML:

<span [innerHtml]="potentiallyNotSafeHtmlCode | safePipe"></span>
seawave_23
  • 1,169
  • 2
  • 12
  • 23