How to display fetched html as is inside angular 2 template?

Question

I'm getting post's data from remote server, the post's data contain html with style and class attribute (generated from a WYSIWYG editor).

I want to render the html data as is, without filtering or sanitizing it.

I tried to use this method:

<div [innerHTML]="post.body"></div>

But Angular is deleting the style attribute from the html.

Is there anyway to keep the html attributes (even if it's dangerous)?

http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Nov 02 '16 at 11:52

score 2 · Answer 1 · answered Nov 02 '16 at 11:54

I think you must anyway do Like this:

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

@Component({
  selector: 'my-app',
  template: `
  <div [innerHTML]="_htmlProperty"></div>
  `
})
export class AppComponent {
  
  _htmlProperty: string = 'AAA<input type="text" name="name">BBB';
  
  constructor(private _sanitizer: DomSanitizationService){ }
  
  public get htmlProperty() : SafeHtml {
     return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty);
  }

}

you need to sanitize html as in angular 1.*

How to display fetched html as is inside angular 2 template?

1 Answers1