Angular2 use basic pipe in custom pipe

Question

I'd like to add some additional functionality to the basic angular2 pipes.

ie. some extra formatting done on the currency pipe. To do that I'd like to use the existing pipe in the component code of my custom pipe.

Is there any way this can be done?

@Pipe({name: 'formatCurrency'}) export class FormatCurrency implements PipeTransform { transform(value:number, args:string[]) : any { var formatted = value/100; //I would like to use the basic currecy pipe here. ///100 | currency:'EUR':true:'.2' return 'Do some extra things here ' + formatted; } }

Rutger van Baren · Accepted Answer · 2016-03-05 16:12:17Z

You can extend CurrencyPipe, something like this:

export class FormatCurrency extends CurrencyPipe implements PipeTransform { transform(value: any, args: any[]): string { let formatedByCurrencyPipe = super.transform(value, args); let formatedByMe; // do your thing... return formatedByMe; } }

If you look at the source, that's similar to how angular pipes work...

(Added by question author)

Don't forget to import the CurrencyPipe Class

import {CurrencyPipe} from 'angular2/common';

Thnx! I added the import line to your answer, had to search to find out from where the CurrencyPipe is imported.
outdated answer, better approach here: stackoverflow.com/questions/35144821/…
Why extend it when you could just put the CurrencyPipe the constructor and use it?

Michael Kang · Accepted Answer · 2016-03-05 05:49:02Z

19

Alternatively, you can inject the CurrencyPipe:

bootstrap(AppComponent, [CurrencyPipe]);

Pipe:

@Pipe({ name: 'mypipe' }) export class MyPipe { constructor(private cp: CurrencyPipe) { } transform(value: any, args: any[]) { return this.cp.transform(value, args); } }

answered Mar 5, 2016 at 5:49

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

3 Comments

Rutger van Baren Over a year ago

I also like this way. Is there another way to a CurrencyPipe provider? Adding it to the bootstrap seems a bit messy. I tried the following without success: @Pipe({ name: 'formatCurrency', providers: [CurrencyPipe], pipes: [CurrencyPipe] })

Michael Kang Over a year ago

Good question. I think you can also specify [CurrencyPipe] as a dependency of the component: providers: [CurrencyPipe]. I agree, its too bad it doesn't work at the Pipe level.

Dominik Over a year ago

I have just imported the module that contains the actual pipe (it is a custom pipe not default Angular pipe but I think it does not matter) and I have been able to inject it in the other pipe (these two are not in the same module) without problems.

gesiud · Accepted Answer · 2018-09-26 13:35:32Z

You can use Angular pipes in your custom pipe.

First, in your pipe file, you must import desired pipe eg.

import { SlicePipe } from '@angular/common';

And then use it in your custom pipe:

 transform(list: any, end: number, active: boolean = true): any { return active ? new SlicePipe().transform(list, 0, end) : list;

}

Tested on A6.

Although this works for simple cases, be wary of instantiating objects that should be DI-d.

Philipp · Accepted Answer · 2023-03-08 15:27:15Z

The solution above with extending one pipe from another is working but it provides redundant complexity. If following programming best practices we should prefer composition over inheritance if possible.

The solution here is just injecting one pipe in another using dependency injection (as @pixelbits proposed).

But one more important thing here is that we need to add injectable pipe to providers array in the module we are working in.

@NgModule( providers: [PipeToBeInected] ) class MyModule {}

Collectives™ on Stack Overflow

Angular2 use basic pipe in custom pipe

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Linked

Related