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: 'filter', pure: false })
export class filter implements PipeTransform {
  transform(value) {
    this.items1=value;
    this.ticket1 = [];
    if (this.items1.length >0) {
      for (var i = 0; i < this.items1.length; i++) {
        this.ticket1.push(this.items1[i])
      }
    }
  }
}

I want to call this pipe from the component.

Shainashaine

Answer 1

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);
  }
  (...)
}

Benediction

i want to call from the MyComponent class directly..is there any way to do like that? – Shainashaine

You need to instantiate it directly and call the transform method. I updated my answer... – Benediction

It seems the pipes attribute doesn't exist anymore. Is still that the way to import a pipe locally? – Caducity

How to call pipe on particular function call from component itself? – We

Pipes is not the property of the component anymore. This change was part of Angular 2 release. – Spithead

For me the later example is a bit, just because you can doesn't mean you should. If you having to call your pipe from within the component then this is a strong indication that the functionality in that pipe should be further decomposed into a service and that service injected, into your component and your pipe. Creating new classes on the fly like this makes it very difficult to write correctly isolated tests. That's why we have dependency injection – Synecious

Answer 2

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.

Eisenhart

Answer 3

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

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

Loutish

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);

Ehrsam

i want to call the filter directly from the component, not from the html template – Shainashaine

Pipes are supposed to be used in HTML. If you want to call it directly then just create an instance let f = new filter() and then call it like let result = f.transform(value, [filterArg]); – Ryannryazan

Answer 5

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 {}

Lodhia