How to use a pipe in a component in Angular 2?

Question

I have a pipe class which returns data based on the arguments you are passing. I know how to use it in my template HTML using the | symbol, but I want to use it in my component too.

Is there a way to call a pipe directly from inside a component or a service in Angular 2?

Answer 1

You can call your pipe directly in your code by using:

YourPipeClass.prototype.transform(value, arg1, arg2);

You can call it from inside your component or from anywhere else that imports it.

There is also the new way:

new SortTodosPipe().transform(value, arg1, arg2);

But keep in mind it will create an object, so either save that object for later use or use the prototype method.

Anyway you choose, you must add the pipe to your providers if you use it inside a component, like so:

@NgModule({
    providers: [YourPipe]
})

Answer 2

I would instance it and call it "transform" method. I would do so:

• because some pipes can be not pure (ie not stateless). Such pipes contain a state associated with an instance.
• because dependency injection is supported for pipes so perhaps you need to provide some parameters when instantiate it.

Here is a sample with sample value and parameters:

import {FilterPipe} from './my.pipe';

(...)

@Component({
  (...)
})
export class SomeComponent {
  someMethod() {
    var val = [
      { name: 'test', fieldName: 'fieldvalue' },
      (...)
    ];
    var params = [ 'fieldName', 'fieldValue' ];

    var p = new FilterPipe();
    var result = p.transform(val, params);
  }
}

In the template this would be used for example this way:

<div *ngFor="#elt of val | filter:'fieldName':'fieldValue'">
  {{elt.name}}
</div>

Answer 3

I would keep the reusable part of what you're trying to do in a separate service, which can then be injected anywhere. This feels like a slippery slope to something less testable and reusable.

Answer 4

I give solutions to solve this question from previous answers:

• First solution from @Eran Shabi answer:

You can create instance from Pipe class then use it's transform method within component class, Like this

@Component({
  ...
})
export class Component {

  method() {
    const date: sting = '24-05-2020';

    const datePipe = new DatePipe();
    const formatedDate = datePipe.transform(date, 'shortTime');
  }
}

• Second solution from @Alexander Leonov answer:

You can Provide DatePipe using @component Tag Or Using @Module tag under your Module class for this Component Then using Dependency injection to inject DatePipe instance into Component's constructor, Like this

@Component({
  ...
  providers: [DatePipe] // if you want to provide DatePipe under Module see @Alexander Leonov answer
})
export class Component {

  Component(private _datePipe: DatePipe) {
  }

  method() {
    const date: sting = '24-05-2020';

    const formatedDate = this._datePipe.transform(date, 'shortTime');
  }
}

Notices:

• Like Built-in Pipes classes, also your custom Pipe can apply this solutions

• This Solutions apply on Angular v7+, I Don't known is work with Angular v2