Menu
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?
517
It's easy to create custom pipes to use in your templates to modify interpolated values. You don't have to duplicate your code if you want to also use a pipe's functionality in a component class. All you have to do really is inject the pipe like a service, and then call its transform method.
A pipe is a function or operator that allows us to pass the output of a function as the input of another. JavaScript and TypeScript don't support pipes natively (as an operator), but we can implement our pipes using the following function: const pipe = <T>(...
These filters are known as "Pipes" in Angular 2. Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to the desired output. There are many built-in pipes in Angular 2.
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]
})
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
