Угловое объявление пользовательской трубы

Я пытаюсь использовать пользовательский Pipe для фильтрации списка элементов.

// 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;
  }
}

Я хотел бы использовать его на странице Component, отображающей этот список.

// 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>

Я пытаюсь импортировать Pipe в 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) {
  }    
}

Но я получаю такую ​​ошибку:

Ошибка: ошибки синтаксического анализа шаблона: канал myFilter не найден

Я также пытаюсь объявить его как провайдеров в mymodule-list.module.ts или глобально в своих app.modules.ts объявлениях и провайдерах, но все равно не работает.

Я просматриваю документацию по Angular по Pipe , а также другие ответы на stackoverflow, но не могу найти способ заставить его работать.