Angular2 innerHtml binding remove style attribute [duplicate]

Question

My problem, that when I use innererHtml binding - angular2 remove all styles attributes. It's important for me, bacause in my task - html is generated on server-side with all styles. Example:

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
  `,
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = 'Angular2'
    this.html = "<span style=\"color:red;\">1234</span>";
  }
}

But in DOM I see only 1234 and this text is not red.

http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview

Thank you!

Answer 1

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

Answer 2

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 {
}

Answer 3

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