How to tell angular (2) currency pipe to display as it is if value is a string not int or float

angular, angular2-pipe

Solution

The manual explicitly states that it accepts a numeric expression and nothing else:

number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

The pipe is really simple and can be extended and used instead of `CurrencyPipe` to conform to the expected behaviour:

const _NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;

@Pipe({name: 'currency'})
export class LooseCurrencyPipe extends CurrencyPipe {
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    if (typeof value === 'number' || _NUMBER_FORMAT_REGEXP.test(value)) {
      return super.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}

To create a new pipe with different name, `CurrencyPipe` may be injected into custom pipe:

@Pipe({name: 'looseCurrency'})
export class LooseCurrencyPipe implements PipeTransform {
  constructor(private _currencyPipe: CurrencyPipe) {}

  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    if (typeof value === 'number' || _NUMBER_FORMAT_REGEXP.test(value)) {
      return this._currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}

In order for `CurrencyPipe` to be injected through DI, it should be additionally added to module providers:

declarations: [LooseCurrencyPipe, ...],
providers: [CurrencyPipe, ...],

Problem

The currency pipe should be smart enough to handle `string`, `float`, `int`, etc automatically. if passed value is `string` or not `int` or `float`, it should do nothing and display the passed value as it is. And only display formatted value if it is `int` or `float`. It was happening in angularJs but not happening in angular (2) How to tell currency pipe to escape in case its `string` and do currency formatting if its a `decimal` value. I am expecting something like below. Example `<div>Money:{{'xxx/vv/cc' | currency:'USD':true:'1.2-2'}}</div>` should display `xxx/vv/cc` `<div>Money: {{''11.99'' | currency:'USD':true:'1.2-2'}}</div>` should display `$11.99` --$ symbol included. But its not happening. Error I am getting is `caused by: Invalid argument 'Included' for pipe 'CurrencyPipe'` I think it was happening by default in angularjs but in angular2 its not happening by defalut.

Original source