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