Angular custom Pipe declaration

I am trying to use a custom Pipe to filter a list of items.

// pipes/my-filter/my-filter.ts

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

@Pipe({
name: 'my-filter',
})
export class MyFilter implements PipeTransform {
transform(value: string, ...args) {
return value;
}
}


I would like to use it in a page Component that display that list.

// pages/mymodule-liste/mymodule-liste.html

<ion-content>
<ion-searchbar
placeholder="Find"
[(ngModel)]="myInput">
</ion-searchbar>
<button ion-item *ngFor="let item of listItem | myFilter: myInput"">
</ion-content>


I try to import the Pipe to the Component

// pages/mymodule-liste/mymodule-liste.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MyFilter } from '../../pipes/my-filter/my-filter';

@IonicPage()
@Component({
selector: 'page-mymodule-liste',
templateUrl: 'mymodule-liste.html',
})
export class MymoduleListePage {
listItem: any
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public myFilter: MyFilter) {
}
}


But I get this error:

Error: Template parse errors: The pipe 'myFilter' could not be found
​

I also try to declare it as providers in mymodule-list.module.ts, or globaly in my app.modules.ts declarations and providers but still doesn't work.

I take a look at Angular documentation about Pipe, as well as other stackoverflow answers but can't find a way to make it work.

So my question is how to declare/register a custom Pipe in Angular (v4.1.0) / Ionic (v3.3.0) for use in a specific component?

Continue reading...