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

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

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.


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

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