SanitizeHtml Pipe not working


Working with ionic 3 lazy loading Sanitize Html Pipe, but getting error

The pipe 'keepHtml' could not be found ("n-content>
	<div  padding class="pageheading">Contact Us</div>
	<ion-card padding class="cardround" [ERROR ->][innerHTML]="pagecontent | keepHtml" >


My Pipe code:

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

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);

using in html:
<ion-card padding class="cardround" [innerHTML]="pagecontent | keepHtml" ></ion-card>

as per this example

What is wrong with this ?


Maybe trivial, but did you add the pipe in your module’s declaration, e.g. in app.module.ts?

  declarations: [


You can try this


yes i had this in app.module.ts exactly same as example.


This seems to working but still can’t bypass my html bypassSecurityTrustHtml

   <ion-icon name="mail" item-start></ion-icon>
   <ion-icon name="call" item-start></ion-icon>
     1-800-000-0000 (Toll free) 
   <ion-icon name="call" item-start></ion-icon>

On html page icons are missing and list view not working. any suggestion ?


Where do you use your pipe Something like

{{ pageContent| keepHtml }}


i am using in my .html like
<ion-card padding class="cardround" [innerHTML]="pagecontent | keepHtml" ></ion-card>


I would try it so

<ion-card padding class="cardround">
    {{ pageContent| keepHtml }}


it says
SafeValue must use [property]=binding: undefined (see if i use {{ pageContent| keepHtml }}


What error are you getting?


initially i was getting The pipe 'keepHtml' could not be found later i update code as per suggestion by @Jacktoolsnet and after that now getting

SafeValue must use [property]=binding: undefined (see if i use {{ pageContent| keepHtml }}


Post your page module. If it doesn’t look like this, that’s probably the source of the problem.


here it is

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactUsPage } from './contact-us';
import { Pipes } from '../../pipes/pipe';

  declarations: [
  imports: [
  exports: [
export class ContactUsPageModule {}

i am following example


Don’t follow random tutorials. You’ll just get errors.

Your page doesn’t care what a Pipe is. Only your Pipe cares what a Pipe is. So you don’t import Pipe into your page. Import the actual pipe module you build into the page. Like the MsToMinsPipeModule in the official Ionic project I linked you to.


I’m really hesitant to comment, because I think it’s a significant security risk to attempt what is being attempted here in the first place.

So I really hope that anybody reading this will take that to heart and come up with a safer and more idiomatic way of dealing with things.

That being said, read this. There is a difference between binding and interpolation when non-strings are involved, and it affects sanitization.