14

I would like to call the numberPipe on my custom pipe I find this answer

Angular2 use basic pipe in custom pipe

but I this solution don't work for me. I have an error "The pipe 'bigInteger' could not be found"

import { Pipe, PipeTransform } from "@angular/core"
import { CurrencyPipe  } from "@angular/common"

@Pipe({
 name: "bigInteger"
 })
 export class BigInteger extends CurrencyPipe implements PipeTransform {
   transform(value: any): string {
    return value
 }
}
Community
  • 1
  • 1
imtah
  • 409
  • 1
  • 6
  • 16

2 Answers2

14

Maybe obsolete, but this worked for me (Angular 5):

import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common'

@Pipe({
  name: 'bigInteger'
})
export class BigInteger extends DecimalPipe implements PipeTransform {
  transform(value: any, args?: any): any {

    let result;
    result = super.transform(value, args);

    //any transformations you need

    return result;
  }

}

Then you just use it like regular number pipe, but can customize as you wish:

<span>{{someValue | bigInteger : '1.2-2'}}</span>
Ivan Amelyanenka
  • 141
  • 1
  • 3
10

update

this should be fixed since a while at least in Angular4

original

There is a known issue with DI and classes that extend other classes

https://github.com/angular/angular/issues/8694

Util this is fixed you can use composition instead of inheritance:

@Pipe({
  name: "bigInteger"
})
export class BigInteger implements PipeTransform {

  constructor(private currencyPipe:CurrencyPipe) {}

  transform(value: any): string {
     return this.currencyPipe.transform(value);
  }
}
Ben Taliadoros
  • 7,003
  • 15
  • 60
  • 97
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 3
    in addition to this, I also was getting an error when using my custom pipe in the view template, complaining that there was no provider for CurrencyPipe. So to get around this error, in my app.module.ts I added it to the Providers list: `providers: [..., CurrencyPipe]` and now my custom pipe based on it works! Now, I'm sure that this may not be best practice or something but I'd need to see some reasonable way to override default pipes or maybe there's a better way? – FireDragon Apr 25 '17 at 03:52
  • also, the CurrencyPipe can be found in Angular's Common module `import { CurrencyPipe } from '@angular/common';` – FireDragon Apr 25 '17 at 03:54