How to import and use pipe globally


Hi all,

I have googled and googled and only found outdated/solutions that simply didn’t work… So, let’s go back to step 1. I have run ionic g pipe GreatPipe, adjusted the generated file as needed, attempting to use the pipe on a page doing the following

<div [innerHTML]="article.text | GreatPipe"></div>

and then what? I’m assuming I have to include it somehow in my app.module.ts, which is where most of the results I found on Google were doing things, I just have no idea how.

$ ionic info
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: Mac OS X Sierra
Node Version: v7.2.0


In the declarations of your AppModule. See Custom Pipes in the Angular docs for more.


I’m still being told The pipe 'GreatPipe' could not be found in the console after doing that

import { GreatPipe } from '../pipes/great-pipe'

	declarations: [
	imports: [
	bootstrap: [IonicApp],
	entryComponents: [
	providers: [

The pipe file

import { Injectable, Pipe } from '@angular/core';

	name: 'great-pipe'
export class GreatPipe {
	transform(value, args) {
		return value;

Custom Pipe Ionic 3 | Pipe Not Found

If the name of your pipe is great-pipe then you need to use it as "article.text | great-pipe". Learning some Angular basics would pay off.


I assumed it would be looking it up by the class name - thank you!