Angular 2: Display HTML without sanitizing/filtering

You might have a situation where you need to display/bind HTML code into some DOM elements.

Usually, there's no problem in that binding, except that Angular 2 will remove all the attributes from your HTML tags.

One solution to this is to create a Pipe and use it whenever you need the HTML to be as is (not filtered, not sanitized).

Create new file to hold the pipe pipes/keep-html.pipe.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);
  }
}

Add an import statement in your app.module.ts:

import { EscapeHtmlPipe } from "./pipes/keep-html.pipe";

@NgModule({
  declarations: [EscapeHtmlPipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

Finally use that pipe in your template:

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

That's it!

The solution is inspired by this Stackoverflow answer.