Angular custom Pipe declaration

Question

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?

score 1 · Accepted Answer · answered Jun 01 '17 at 15:52

1

your pipe name is my-filter not myFilter

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

answered Jun 01 '17 at 15:52

CharanRoot

6,181
2
27
45

It would be good practice to rename the pipe to `myFilter` since pipes are used inside of expressions. – Aluan Haddad Jun 01 '17 at 17:01
As simple as that. I feel a bit stupid... Thanks for the answer. – TGrif Jun 02 '17 at 08:44
@Aluan Haddad I think you're right and I try to rename `my-filter` pipe to `myFilter` but got error: _The pipe 'myFilter' could not be found_. Quite typical with Angular. – TGrif Jun 19 '17 at 13:32
1

In fact I just realize this is no more the "Angular way" to do this. The documentation is fairly clear about it, but however I was thinking I could just implement filter pipe like it exists in first version. In fact, I follow advices I found in some other answers to move the logic in the _Component_. But still curious about the naming logic. – TGrif Jun 19 '17 at 19:31
the logic behind using the name `myFilter` instead of `my-filter` is that it is used in the context of Angular _expressions_ used in templates. Such template expressions, used between `{{}}` and in the _values_ of attributes, are _JavaScript like_ (e.g. `n === 1 ? 'one': 'many'`) and should follow its naming conventions. However, Angular itself violates HTML's naming rules by introducing case sensitive attribute _names_. The whole thing is a mess. – Aluan Haddad Jun 27 '17 at 04:50

score 0 · Answer 2 · answered Jun 01 '17 at 15:56

0

The name of your pipe is my-filter not myFilter.

Also check if the pipe is registered in ngModule in declerations

answered Jun 01 '17 at 15:56

Rahul Singh

19,030
11
64
86

Angular custom Pipe declaration

2 Answers2