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>
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 ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With