When is it useful to inject a custom pipe?

Question

According to the angular docs:

If you choose to inject your pipe into a class, you must provide it in the providers array of your NgModule.

Given exponential-strength.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'exponentialStrength' })
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

I am able to use this custom pipe in a template by adding the declaration to app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ExponentialStrengthPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],

E.G. in app.component.html

<div>
  {{ 2 | exponentialStrength:10 }}
</div>

I'm confused by Angular's documentation. It doesn't mention the need to add the custom pipe to declarations in the documentation. The documentation only mentions providers.

Is it useful in some cases to inject a pipe when the declaration works just fine? I'm having trouble imagining a use case where I would actually put a pipe into providers array. And would I still need to define the custom pipe in declarations in such a case?

Declaring it as a provider gives you the ability to use it inside the component's class or a service (using dependency injection) instead of just the template. https://stackoverflow.com/a/35152297/9901630 — nll_ptr, Jan 22 '20 at 19:01

score 1 · Accepted Answer · answered Jan 22 '20 at 19:00

The docs state if you want to inject a pipe in your component to use as a service, you need to add it to the providers. This could come of use, if you want to use certain functions in your pipe (which you better just move to a util file).

For all intents and purposes you should not add it to the providers, unless you are a bit lazy :)

When is it useful to inject a custom pipe?

1 Answers1