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 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.