Angular : sanitizing HTML stripped some content on css style

Question

I am using a wysiwyg editor in my Angular component, when i try to preview the content of the editor, (after i apply center to the text), i get this warning:

Answer 1

This is by design in Angular 2+ for security reasons. You can workaround it by using the DomSanitizer class.

For example you can make a pipe that prevents sanitization of the value:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

Then you can use it in binding for example like this:

<div [innerHTML]="htmlText | noSanitize">
</div>