Angular 2 CurrencyPipe space between currency and number?

Question

I noticed that there is a pipe called CurrencyPipe in Angular 2, which will filter some decimals from a number. This also adds the ISO currency indicator, ie \'USD\' or any othe

Answer 1

You may solve this problem using a bit of clever CSS using the first-letter pseudo element, add a class to your span:

{{ product.price | currency:'USD':true }}

and in your css add:

.price {
  display: inline-block;
}

.price::first-letter {
  padding-right: 0.3em;
}

The first rule makes sure your price in a block container box (::first-letter does work on inline display blocks), and the second rule adds a bit of extra padding after the currency symbol.

You can tweak this to your liking ...