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

Question

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.

Stunk

Answer 1

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, ...],

Oney

I tried the same way you shown here but it did not work for me. plunker: plnkr.co/edit/cxRU2NB7S0AQKSevmNQT?p=info – Stunk

This works when being used like the answer states, i.e. overriding currency pipe with new implementation. The framework isn't happy when extended pipe is renamed. To do a thing like you're trying to do, composition over inheritance approach will work fine. – Oney

Answer 2

You can use the ternary operator a ? b : c to show b when a is truthy, but show c otherwise.

First have a function in your component that returns true when the value is a number.

component

isNumber(e) {return typeof e === 'number'}

Then use that to determine whether to send the value to the currency pipe or print it directly

template

<div>
    {{ isNumber(money) ? (money|currency:'USD':true:'1.2-2') : money }}  
</div>

live demo

Grant

you should not use a function inside a template. – Distrait