Angular 4: Exibindo HTML sem remover tags do código

O Angular por padrão faz o escape de tags HTML, mesmo que vc use o [innerHTML] ele ainda vai remover tags como o style por exemplo. Para resolver isso podemos criar um pipe para aplicar o sanitize do código que queremos exibir.

Crie um novo arquivo pipes/keep-html.ts:

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

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

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

Faça a declaração do PIPE no seu módulo app.module.ts:

import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
@NgModule({
  declarations: [
    EscapeHtmlPipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Agora é só usar:

Fonte: https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *