CODEWITHSUNDEEP
angularangular-pipe
Rutger van Baren
Rutger van Baren

Reputation: 8008

Angular2 use basic pipe in custom pipe

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

Upvotes: 24

Views: 15757

Answers (4)

Philipp
Philipp

Reputation: 11

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

Upvotes: 0

gesiud
gesiud

Reputation: 106

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.

Upvotes: 0

Sasxa
Sasxa

Reputation: 41314

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

Upvotes: 38

Michael Kang
Michael Kang

Reputation: 52867

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

Upvotes: 19

Related Questions