Style을 가진 HTML 표시하기

보안상 html 의 attribute는 innerHTML에서 제거한다
따라서 다음과 같이 처리해 주어야 style이 그대로 나타난다.

pipe 만들기

• safeHtml.ts

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(protected domSanitizer: DomSanitizer) {}
 
  public transform(html: any): any {
    return this.domSanitizer.bypassSecurityTrustHtml(html);
  }
}

@NgModule({
  declarations: [ SafeHtmlPipe ],
  exports: [ SafeHtmlPipe ],
})
export class SafeHtmlPipeModule { }

• test.html

<div [innerHTML]="article.content | safeHtml"></div>