Angular2 innerHtml removes styling

Question

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]

This looks like pretty similar: stackoverflow.com/questions/36265026/… — Petr Adam
– Petr Adam, Commented Sep 30, 2016 at 15:06

AndyTheEntity · Accepted Answer · 2023-03-08 15:50:03Z

33

Angular2 sanitizes dynamically added HTML, styles, ...

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe {
  constructor(private sanitizer: DomSanitizer){}
    
  transform(html: string) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

[innerHtml]="poi.content | safeHtml"

See

edited Mar 8, 2023 at 15:50

AndyTheEntity

4,1962 gold badges24 silver badges20 bronze badges

answered Sep 30, 2016 at 15:06

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sireini Over a year ago

unhandled promise rejection:

EXCEPTION: Can't resolve all parameters for Safe: (?). platform-browser.umd.js:2347 EXCEPTION: Can't resolve all parameters for Safe: (?).BrowserDomAdapter.logError

also can't find name DomSanitizer

Sireini Over a year ago

Do I have to import import DomSanitizer?

Günter Zöchbauer Over a year ago

Yes, you have to import every type you use. You also need to add Safe to declarations in NgModule. If DomSanitizer doesn't work, try changing it to Sanitizer. I have seen it mentioned that this worked instead.

Sireini Over a year ago

like this import {DomSanitizationService} from '@angular/platform-browser';? or is it DomSanitizer? Because DomSanitizer isnt recognisble

Sireini Over a year ago

Thanks it is working I have to update my angular because in my case I use DomSanitizationService

|

Collectives™ on Stack Overflow

Angular2 innerHtml removes styling

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related