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

Answer 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.

Answer 2

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

Answer 3

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