Angular Default Currency Pipe not working along with amount

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:

10

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!!