How to import and use pipe globally

Ionic Framework ionic-v3
1

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
2

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

3

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

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

@NgModule({
	declarations: [
		...,
		GreatPipe
	],
	imports: [
		...
	],
	bootstrap: [IonicApp],
	entryComponents: [
		...
	],
	providers: [
		...
	]
})

The pipe file

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

@Pipe({
	name: 'great-pipe'
})
@Injectable()
export class GreatPipe {
	transform(value, args) {
		return value;
	}
}
4

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.

5

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