21

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;
  }
}
br.julien
  • 3,296
  • 2
  • 23
  • 44
Rutger van Baren
  • 7,884
  • 2
  • 23
  • 24

3 Answers3

33

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';
Rutger van Baren
  • 7,884
  • 2
  • 23
  • 24
Sasxa
  • 38,926
  • 16
  • 86
  • 99
15

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);
    }
}
pixelbits
  • 50,631
  • 15
  • 93
  • 132
  • 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. – pixelbits 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
-1

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.

gesiud
  • 86
  • 5