0

I am trying to show the ones (pennies) position when my number is formatted through Angular's CurrencyPipe. Here is my CurrencyPipe:

(686.50 | currency:'USD': true: '1.0-2')

The current output is $686.5.
The expected output is $686.50.

My {minFractionDigits} is 0 because I want to show whole numbers (e.g., 52.00) as $52. However, when a decimal value other than .00 exists (either in the ones or tens position), I want my formatted number to include both decimal values, not just the tens (dimes) position.

How can I make the CurrencyPipe display the ones (pennies) position for numbers such as 686.50, while not display any decimals for numbers such as 52.00?

Avery Buehler
  • 1
  • 1

1 Answers1

0

So you have two questions in one post.

To show two decimal points your pipe needs to be like so: urrency:'USD':true:'1.2-2'.

And here's how you could have a conditional template to show decimals or not:

  <ng-container *ngIf="value % 1 === 0; else decimals">{{ valueB | currency:'USD':true:'1.0' }}</ng-container>
  <ng-template #decimals>{{ value | currency:'USD':true:'1.2-2' }}</ng-template>

It checks for the remainder, and if it's 0, then uses the pipe without decimals. Otherwise, calls the template which uses the pipe with two decimals.

ulmas
  • 2,203
  • 16
  • 22
  • My question was in regard with how to make a CurrencyPipe display the ones (pennies) positions for numbers such as 686.50, which is one question. My current implementation is your suggestion, but it's not ideal since the intended functionality of the pipe is to display two decimal places with 'USD' set as the currency. Further research has shown the best option is to create a custom CurrencyPipe, as [Angular is not looking to resolve this discrepancy](https://github.com/angular/angular/issues/27391#issuecomment-443630166). – Avery Buehler Feb 11 '20 at 17:32
  • @AveryBuehler like I mentioned in the answer, if you change your pipe from `currency:'USD': true: '1.0-2'` to `currency:'USD': true: '1.2-2'` it should show two decimal places / pennies for `686.50` and it will display as `$686.50`. Did that not work? – ulmas Feb 11 '20 at 20:18