Angular Default Currency Pipe not working along with amount

Question

I have a problem with the already built in CurrencyPipe from Angular. I have tried with following

<div class="row">
  <div class="col-7"><p>Delivery fee </p></div>
  <div class="col-5 text-right">
    <p>{{cartService.getItems().length > 0 ? 10 : 0 | currency:'INR':'symbol-narrow'}} </p>
  </div>
</div>

It display only the value not displaying currency along with the amount.

Output:

Expected output

₹10

I am also using angular pipe for displaying another amount. which is working perfectly along with amount.

<div class="row pad-top20">
  <div class="col-7"><p><strong>Total</strong></p></div>
  <div class="col-5 text-right">
    <p><strong>{{calculateGrandTotal() | currency:'INR':'symbol-narrow'}}</strong></p>
  </div>
</div>

Output :

₹22,180.00

What is the difference between these two angular currency pipes ? Thanks!!

make the cart length 0, and execute the else logic in ternary. you will get the currency with 0 then I am sure. Just check and let me know. I guess you have to put pipe for both conditions. If this works let me know I will answer it then. — Wahab Shah, Oct 24 '20 at 13:16
@WahabShah Thank you. I have added currency pipe for both condition — Sufail Kalathil, Oct 24 '20 at 15:02

score 3 · Accepted Answer · answered Oct 24 '20 at 13:37

3

You will need to add ( and ) before currency pipe in code. Like this.

<div class="row">
  <div class="col-7"><p>Delivery fee </p></div>
  <div class="col-5 text-right">
    <p>{{(cartService.getItems().length > 0 ? 10 : 0) | currency:'INR':'symbol-narrow'}} </p>
  </div>
</div>

answered Oct 24 '20 at 13:37

pynode

434
2
7

It would be really appreciated if you can accept this solution ;) – pynode Oct 24 '20 at 13:49
thanks. it's working. i have added currency pipe for both condition for resolving the same. your answer is much more easy. – Sufail Kalathil Oct 24 '20 at 15:05

score 0 · Answer 2 · answered Oct 24 '20 at 15:02

0

I have added currency pipe for both condition.

<div class="row">
      <div class="col-7"><p>Delivery fee </p></div>
      <div class="col-5 text-right">
        <p>{{cartService.getItems().length > 0 ? (10| currency:'INR':'symbol-narrow') : (0 | currency:'INR':'symbol-narrow')}} </p></div>
</div>

answered Oct 24 '20 at 15:02

Sufail Kalathil

558
6
21

this is horrible you shouldn't have to do this. wrapping with () should work like pynode suggested. worst case make a getter or a func that returns 0 or 10 – ihor.eth Oct 24 '20 at 15:05

Angular Default Currency Pipe not working along with amount

2 Answers2