Angular에서 [innerHTML] 사용 시 style 속성이 사라질 때

[innerHTML]을 사용하여 태그 내에 style 속성을 사용하게 되면 보안상의 문제로 style 속성을 제거시켜버린다.

[innerHTML]을 사용하면서 style 속성을 살리고 싶다면 여러가지 방법이 존재한다.

 

1. typescript에서 설정하기

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

@Component({
  selector: 'app-contents-edit',
  templateUrl: './contents-edit.component.html',
  styleUrls: ['./contents-edit.component.css']
})
export class ContentsEditComponent implements OnInit {
  contents: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    // 예시: contents에 DB에서 가져온 HTML이 들어간다고 가정
    const dbHtml = '<div style="width:100%">Your content here</div>';
    
    // HTML을 신뢰할 수 있는 것으로 처리
    this.contents = this.sanitizer.bypassSecurityTrustHtml(dbHtml);
  }
}

 

2. 최상위 style.scss 파일에서 설정하기

해당 innerHTML 태그에 class를 주고 style.scss 파일에서 css 속성을 설정하면 된다. (간단해서 이 방법으로 채택)