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.
<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.
Angular Currency Pipe without symbol If you want to display your own name instead of default currency symbol you have to pass display parameter. The display parameter can be “code” (currencycode will be displayed) or “symbol” or “symbol-narrow” or any other custom value.
Transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
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
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, ...],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With