Angular 2 CurrencyPipe space between currency and number?

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

This isn't possible since the CurrencyPipe relies on Intl.NumberFormat and there is no options for this.

That said you can switch to display $ instead of USD with the symbolDisplay parameter set to true:

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

This will display: $123 which is a bit better ;-) If this doesn't suit you, you need to implement a custom pipe to format your number...

See these links for more details:

• https://github.com/angular/angular/blob/master/modules/angular2/src/facade/intl.ts#L70
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat