Angular2 innerHtml binding remove style attribute [duplicate]

You can leverage DomSanitized to avoid it.

The easiest way is to create custom pipe like:

import { DomSanitizer } from '@angular/platform-browser'import { PipeTransform, Pipe } from "@angular/core";@Pipe({ name: 'safeHtml'})export class SafeHtmlPipe implements PipeTransform  {  constructor(private sanitized: DomSanitizer) {}  transform(value) {    return this.sanitized.bypassSecurityTrustHtml(value);  }}

So you can use it like:

<div [innerHtml]="html | safeHtml"></div>

Plunker Example

I improved the example of yurzui a bit by completing the needed imports:

import {DomSanitizer} from '@angular/platform-browser';import {PipeTransform, Pipe} from '@angular/core';@Pipe({ name: 'safeHtml'})export class SafeHtmlPipe implements PipeTransform  {  constructor(private sanitized: DomSanitizer) {}  transform(value) {    return this.sanitized.bypassSecurityTrustHtml(value);  }}

I also had to add the class in my app.module.ts file

import ...import {SafeHtmlPipe} from "./pipes/safehtml.pipe";@NgModule({    declarations: [        AppComponent,        ...,        SafeHtmlPipe  <--    ],    imports: [...],    providers: [...],    bootstrap: [AppComponent]})export class AppModule {}

Note that the sanitizer has a few methods for trusting content e.g.

this.sanitizer.bypassSecurityTrustStyle(value);this.sanitizer.bypassSecurityTrustHtml(value);this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1]

via https://stackoverflow.com/a/41089093/142714

So, bypassSecurityTrustStyle may also be what you want here, as this will show inline styles within your HTML content (value).

[1] docs: https://angular.io/api/platform-browser/DomSanitizer