1

I'm trying to render a HTML in Angular 2 with [innerHTML]. However angular 2 removes the style attribute from html elements. How can I get the styles rendered?

component.ts

...
content = "<table><tr><td style="width:30%">Hallo</td><td style="width:70%">Welt</td></tr></table>"
---

component.html

<div [innerHTML]="content"></div>
Roman C
  • 49,761
  • 33
  • 66
  • 176
Manuel
  • 9,112
  • 13
  • 70
  • 110

1 Answers1

1

You can address them with /deep/ ::ng-deep

@Component({
  styles: [`
    // :host /deep/ td { // old
    :host ::ng-deep td {
      width: 30%;
    }`
})

You also could disable style encapsulation for the component

@Component({
  ...,
  viewEncapsulation: ViewEncapsulation.None
)}

but that might bring other disadvantages as styles bleeding in and even styles without /deep/ bleeding out.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Does this work generically without defining width? – Manuel Feb 20 '17 at 12:04
  • What do you mean with "without defining width"? That's normal CSS, it's just added `/deep/` to cross component boundaries like `>` for direct child. Dynamically added HTML is treated similar to HTML from a child component. – Günter Zöchbauer Feb 20 '17 at 12:57