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 other local currency.

My problem is that the output is displayed like this:

USD123

Without space between USD and 123, is this really the preferred behavior? Do I have to write my own pipe for this or is there something that I can do to add a space?

Here is some code:

<span>{{ product.price | currency:'USD' }}</span>

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:

<span class="price">{{ product.price | currency:'USD':true }}</span>

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