How to create and call a pipe from the component in Angular 2?

Question

I want to create a dynamic pipe which I am going to call from the component.

import {Component, Pipe, PipeTransform} from \'angular2/core\';

@Pipe({ name: \         


        

Answer 1

In version rc6 you need to register the pipes you want to use in a module -> declarations

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]....

Answer 2

In case you want to use your pipe on different modules several times, I suggest you aggregate all of your pipes into one module (e.g., PipesAggrModule) and then import this module into the wanted module. For instance:

my-pipe.module.ts

@Pipe({name: 'MyPipe'})
export class MyPipe { ... }

pipes-aggr.module.ts:

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MyPipe,
    MyPipe2,
    ...
  ],
  declarations: [..., MyPipe, MyPipe2, ...]
})
export class PipesAggrModule {}

Then, to use your pipes, simply import the import the PipesAggrModule into the wanted module.

my.module.ts

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

Answer 3

You need to specify it within the pipes attribute of your component

@Component({
  pipes: [ filter ] 
})
export class MyComponent {
  (...)
}

and use it in your template:

{{someArray | filter}}
<div *ngFor="someArray | filter">(...)</div>

Edit

If you want to call the pipe directly within the component class, you need to instantiate it and call its tranform method:

@Component({
  (...)
})
export class MyComponent {
  constructor() {
    let filterPipe = new filter();
    let arr = [ ... ];
    var fiteredArr = filterPipe.transform(arr);
  }
  (...)
}

Answer 4

You need to register the pipes you want to use in a component:

@Component({
  ...
  pipes: [filter],
  template: `
<div *ngFor="let item of someData | filter">{{item}}</div>
`
  ...})
class SomeComponent {
  someData = [ ... ];
}

@NgModule({
  imports: [CommonModule],
  declarations: [filter]
})
export class MyFilterModule()

To make the pipe available add the module to imports where you want to use it

@NgModule({
  declarations: [AppComponent, SomeComponent],
  imports: [BrowserModule, MyFilterModule]
})
export class AppModuleModule()

If you want to call the pipe from code

let f = new filter();
f.transform(value, filterArg);

Answer 5

I just wanted to add to @pasha-oleynik answer. Angular 2+ including Ionic 2+ all expect the pipe to be declared in the module:

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

Also this is the only place that the pipe needs to be declared. There is no longer a pipe property under a module or component.