how do I import and register a pipe in angular4

Question

I've created this pipe

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

@Pipe({
  name: 'search'
})

export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

and put it inside search.pipe.ts

How do I import it inside my main component class and how do I register it?

I've checked this tutorial and they show an example of using it inside the component but they do not show how they import and register it.

I've tried this inside my main component

import { SearchPipe } from './search.pipe.ts'

@NgModule({
  declarations: [ SearchPipe ]
})

and then in html file of the same component I tried this:

                    <ul *ngFor="let item of costCenters | search:'orgnumber,orgname':tempNode.cost_center">
                        <li>{{item.orgname}}</li>
                    </ul>

It produces this error:

The pipe 'search' could not be found ("gIf="showCostCenterDropDown" class="cost-center-dropdown">
                        <ul *ngFor="let [ERROR ->]item of costCenters | search:'orgnumber,orgname':tempNode.cost_center">
                            "): ng:///AppModule/TripTagsComponent.html@46:40

If you want to share the pipe globally, then you can register it with a shared module and after that import that module in other featured modules for use. This shared component will have components and pipes that you mostly reuse in your application. In declarations array of your shared module, register it and then import shared module. — Muhammad Ahsan, Mar 28 '18 at 10:56
hi I need a local pipe that is only used inside this component, the app is really big and I would not like to have to include it globaly, how can I use it just inside single component? is that possible? — niko craft, Mar 28 '18 at 11:01
If you don't want it anywhere else then you can register this pipe with the module that also declares the component where you plan to use this pipe. This will it will be only available in current module at least. — Muhammad Ahsan, Mar 28 '18 at 11:09
https://alligator.io/angular/using-pipes-in-component-class/ — Muhammad Ahsan, Mar 28 '18 at 11:12
Possible duplicate of [Angular custom pipe not be found](https://stackoverflow.com/questions/45098278/angular-custom-pipe-not-be-found) — msanford, Mar 28 '18 at 13:12

Roland Rácz · Answer 1 · 2018-03-28T10:53:42.127

2

You have to include the pipe in the declarations part in you module where you want to use it:

@NgModule({
    ...
    declarations: [
        ...
        SearchPipe,
    ],
})

edited Mar 28 '18 at 10:53

answered Mar 28 '18 at 10:52

Roland Rácz

2,879
3
18
44

updated my question, already tried that, its not working yet, get an error – niko craft Mar 28 '18 at 10:53
@nikocraft You have to write this (add the pipe to your existing `@NgModule`) in your `AppModule` for example, not in your component. – Roland Rácz Mar 28 '18 at 10:57
is it not possible to keep it just local to the component where I want to use it, the app is really big and I would like this pipe to be just for this component. – niko craft Mar 28 '18 at 11:00
No, you have to add the pipe in your module like components and directives. You can create a SharedModule, but it is a different thing, that will not localize the pipe. If you have a big module/app, maybe you should refactor it (create more modules, etc). – Roland Rácz Mar 28 '18 at 11:06
I cant refactor it, its a big app with large team, I'm one of developers so I cant go ahead and refactor things as I please :) – niko craft Mar 28 '18 at 11:07
I see. Put your pipe in the nearest module. There is no other way. Or you can move the pipe's logic to a method instead. – Roland Rácz Mar 28 '18 at 11:11

TheCoderGuy · Answer 2 · 2018-03-28T14:08:49.490

0

First you don't need to write like this. import { SearchPipe } from './search.pipe.ts'

you need import { SearchPipe } from './search.pipe' because the angular know that this is a TS file

And in the Pipe you should import Injectable to Inject this SearchPipe.

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

@Pipe({
  name: 'search'
})
@Injectable
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

Try this at the App Module

exports: [
    SearchPipe

And here is a pipe I think it is better.

http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html

edited Mar 28 '18 at 14:08

answered Mar 28 '18 at 11:09

TheCoderGuy

771
6
24
51

Errm, dont you think WE use @Injectable() decorator if a service uses some other service inside its class ? – Muhammad Ahsan Mar 28 '18 at 13:18
@Ahsan9981 Errm, sorry you are right he cannot use Injectable here, thanks but anyway the link i wroted here works I used in my project and it is working for me – TheCoderGuy Mar 28 '18 at 13:34

how do I import and register a pipe in angular4

2 Answers2