17

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]

Sireini
  • 4,142
  • 12
  • 52
  • 91
  • This looks like pretty similar: http://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling – Petr Adam Sep 30 '16 at 15:06

1 Answers1

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

AndyTheEntity
  • 3,396
  • 1
  • 22
  • 19
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    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 Sep 30 '16 at 15:11
  • 1
    Do I have to import import DomSanitizer? – Sireini Sep 30 '16 at 15:16
  • 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. – Günter Zöchbauer Sep 30 '16 at 15:17
  • like this import {DomSanitizationService} from '@angular/platform-browser';? or is it DomSanitizer? Because DomSanitizer isnt recognisble – Sireini Sep 30 '16 at 15:19
  • `DomSanitizationService` is an old RC.x name. In final it's `DomSanitizer` or `Sanitizer`. – Günter Zöchbauer Sep 30 '16 at 15:20
  • 1
    Thanks it is working I have to update my angular because in my case I use `DomSanitizationService` – Sireini Sep 30 '16 at 15:22
  • That was super awesome solution. Make a pipe and use it anywhere. – Niraj Dec 08 '16 at 13:36
  • I am using your solution but it is giving me error that "The pipe 'safeHtml' could not be found". How can I solved that ? @GünterZöchbauer – Shehram Tahir Aug 15 '17 at 20:31
  • my code `import { Component,Pipe } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({name: 'safeHtml'}) @Component({ selector: 'page-article', templateUrl: 'news-article.html' }) export class Article { constructor(private sanitizer:DomSanitizer) {} transform(html) { return this.sanitizer.bypassSecurityTrustHtml(html); } }` – Shehram Tahir Aug 15 '17 at 20:32
  • Is this class making the innerHTML safe, or unsafe? Just weird to see bypass-security in a function called Safe – Drenai Sep 20 '17 at 19:30
  • It is mean't like "I (the developer) assure you (Angular) that I know what I'm doing and confirm thatbthe content is safe." It just adds a marker for Angular to know it should not meddle with the content. I don't claim this is the best possible name ;-) Suggestions welcome. – Günter Zöchbauer Sep 20 '17 at 19:42