Angular2 Pipe injection error

Ionic Framework ionic-v3
1

Hi,
I try to use angular 2 pipe to filter array:

adresse-search.pipe.ts:

    @Pipe({
      name: 'adresse-search',
      pure: true
    })
    @Injectable()
    export class AdresseSearch implements PipeTransform{
      
      constructor(){
        console.log("hello from pipe")
      }


      transform(value:any,args?:any[]) {
        
        value.map(content => content)
          .concatMap(arr => Observable.from(arr))
          .filter(adresse =>
          {
            if (adresse == null){
              adresse
            }
            else{
              adresse.doc.a_id.toString().contains(args[0]) || adresse.doc.a_adresse.toString().contains(args[0]) || adresse.doc.a_code_postal.toString().contains(args[0]) || adresse.doc.a_ville.toString().contains(args[0])
            }
          })
          .subscribe(val => console.log("filtred "+val))
      }
      }

app.module.ts:

        @NgModule({
          declarations: [
           ...
            , AdresseSearch
          ]

But I have an error on execution :
Unhandled Promise rejection: Template parse errors:
The pipe ‘AdresseSearch’ could not be found

2

remove:

this marks the pipe as injectable service and not as pipe → @Pipe is enough.

1 Like
3

thank you very much , it’s copy-past effect :smile:

4

in addition I called in HTML with class name not with pipe name !

5

@bengtler
Please, when I try to search it show empty array
pipe
transform(adresseList:any,args?:any[]) {

   if(!adresseList){
  return null;
   }

    if(!args){
    
      return adresseList;
    }
   else{
      let query = args[0].toLowerCase();
    return adresseList
      .filter(adresse =>
      {
        console.log("filter "+(adresse.doc.a_id.toString().toLowerCase().includes(query) || adresse.doc.a_adresse.toString().toLowerCase().includes(query) || adresse.doc.a_code_postal.toString().toLowerCase().includes(query) || adresse.doc.a_ville.toString().toLowerCase().includes(query))
        )
            adresse.doc.a_id.toString().toLowerCase().includes(query) || adresse.doc.a_adresse.toString().toLowerCase().includes(query) || adresse.doc.a_code_postal.toString().toLowerCase().includes(query) || adresse.doc.a_ville.toString().toLowerCase().includes(query)
      })
    }
  }

HTML: <ion-searchbar placeholder="Filtrer" [(ngModel)]="motCle" (ionInput)="searchFn($event)"></ion-searchbar> <ion-item *ngFor="let adresse of (adresseList | adresseSearch : motCle)">

PS: the pipe log boolean result (correctly) when I type on filter input !

6

Finally, args[0] took only first char from search input, so I used : args.toString()