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;
  }
}

score 38 · Accepted Answer · edited Mar 05 '16 at 16:12

38

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';

edited Mar 05 '16 at 16:12

Rutger van Baren

7,964
2
24
24

answered Mar 05 '16 at 00:29

Sasxa

40,334
16
88
102

Thnx! I added the import line to your answer, had to search to find out from where the CurrencyPipe is imported. – Rutger van Baren Mar 05 '16 at 16:14
1

outdated answer, better approach here: https://stackoverflow.com/questions/35144821/angular-use-pipes-in-services-and-components – Yasser Nascimento May 15 '20 at 14:20
Why extend it when you could just put the CurrencyPipe the constructor and use it? – Mick Jul 06 '21 at 09:58

score 17 · Answer 2 · answered Mar 05 '16 at 05:49

17

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 05 '16 at 05:49

Michael Kang

52,003
16
103
135

4

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] }) – Rutger van Baren Mar 05 '16 at 16:25
2

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. – Michael Kang Mar 22 '16 at 13:40
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. – Dominik Jul 14 '19 at 10:11

score 0 · Answer 3 · answered Sep 26 '18 at 13:35

0

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.

answered Sep 26 '18 at 13:35

gesiud

106
5

Although this works for simple cases, be wary of instantiating objects that should be DI-d. – Ákos Vandra-Meyer Apr 14 '20 at 11:47

Philipp · Answer 4 · 2023-03-08T15:27:15.143

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 {}

Angular2 use basic pipe in custom pipe

4 Answers4

Linked

Related