[Feature Request] Currency Pipe: improved digit info options

This issue has been tracked since 2022-09-19.

Which @angular/* package(s) are relevant/related to the feature request?



A common way to display currencies (at least in US) is to omit the cents if the price is a round number, or to show two digits if the price is not a round number.
For example, for 3 dollars, $3, and for 3.1 dollar, $3.10.

There is no way to accomplish this with the current currency pipe, which only takes a range for the number of digits after the decimal. The only options either make the first price $3.00 and the second $3.10, or the first price $3 and the second $3.1.

Proposed solution

Extend the digitsInfo format. Currently, the format is {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
As an alternative, we could offer {minIntegerDigits}.{allowedFractionDigits1},{allowedFractionDigits2}[,...]. So the digitsInfo for the format above would be 1.0,2.

Alternatives considered

Alternately, one could use an *ngIf to change out the element with the currency, and use two elements, each with a currency pipe to accomplish the above. Obviously, that is kind of messy.

angular-robot[bot] wrote this answer on 2022-09-21

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

FonecaBot2 wrote this answer on 2022-09-21

I can start working on this c:

kbrilla wrote this answer on 2022-09-27

I think one soultion would be to create new Pipes based on Intl API

const format = new Intl.NumberFormat("en-US", {style: 'currency', minimumFractionDigits: 2, trailingZeroDisplay: 'stripIfInteger', currency: 'USD'}); 

//  $3
//  $3.10

If not maybe reusing the term trailingZeroDisplay option would be good for the current API
with two values as in Intl API - NumberFormat

trailingZeroDisplay Experimental
A string expressing the strategy for displaying trailing zeros on whole numbers. The default is "auto".

"auto": keep trailing zeros according to minimumFractionDigits and minimumSignificantDigits.
"stripIfInteger": remove the fraction digits if they are all zero. This is the same as auto if any of the fraction digits is non-zero.

as for Intl API there are already polyfills for it here polyfill

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201


Issue Title Created Date Updated Date