Angular2 innerHtml binding remove style attribute
AngularStylesAngular Problem Overview
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!
Angular Solutions
Solution 1 - Angular
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>
Solution 2 - Angular
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 {
}
Solution 3 - Angular
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