Beginnerprogrammer Beginnerprogrammer - 2 months ago 94
TypeScript Question

Angular2 innerHtml removes styling

I am using innerHtml and set the html in my cms the response seems okay and if I print it like this

: {{ poi.content }}


it gives me the right content back :
`

<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">Tes11t</td>
<td style="width: 2px;">&nbsp;</td>
<td style="width: 1px;"><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" style="height: 67px; width: 100px;" /></td>
</tr>
</tbody>
</table>


`

But when I use
[innerHtml]="poi.content"
it gives me this html back:

<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>Tes11t</td>
<td>&nbsp;</td>
<td><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg"></td>
</tr>
</tbody>
</table>


Does anybody know why it is stripping my styling when I use
[innerHtml]

Answer

Angular2 sanitizes dynamically added HTML, styles, ...

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}
[innerHtml]="poi.content | safeHtml"

See