I've created a custom Pipe to filter a list of items and integrate it into my Angular/Ionic application.
// pipes/my-custom-filter/my-custom-filter.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myCustomFilter',
})
export class MyCustomFilter implements PipeTransform {
transform(value: string, ...args) {
return value;
}
}
Now, I want to use this custom Pipe in a specific page Component that displays the list.
// pages/my-module-list/my-module-list.html
<ion-content>
<ion-searchbar
placeholder="Find"
[(ngModel)]="myInput">
</ion-searchbar>
<button ion-item *ngFor="let item of listItem | myCustomFilter: myInput"">
</ion-content>
I tried importing the custom Pipe into the Component:
// pages/my-module-list/my-module-list.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MyCustomFilter } from '../../pipes/my-custom-filter/my-custom-filter';
@IonicPage()
@Component({
selector: 'page-my-module-list',
templateUrl: 'my-module-list.html',
})
export class MyModuleListPage {
listItem: any
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public myCustomFilter: MyCustomFilter) {
}
}
Unfortunately, I encountered an error:
Error: Template parse errors: The pipe 'myCustomFilter' could not be found
I attempted to declare it as a provider in my-module-list.module.ts or globally in my app.modules.ts, but the issue persists.
I referred to the Angular documentation on Pipes and searched through Stack Overflow for solutions, yet couldn't resolve it.
My question is: how can I properly declare/register a custom Pipe in Angular (v4.1.0) / Ionic (v3.3.0) for use in a specific component?