How to display the currency symbol to the right in Angular

Question

I have to display Euro currency like this : 583 €.

But with this code:

{{ price | currency:\'EUR\':true }}

I get

Answer 1

Currency pipe format is controlled by the current locale rules. See also Using Pipes:

The Date and Currency pipes need the ECMAScript Internationalization API. Safari and other older browsers don't support it. We can add support with a polyfill.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Under the hood CurrencyPipe delegates formatting to new Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Using options:

var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457

---

In other words, formatting currencies with CurrencyPipe involves:

1. Using the correct locale. See this on how to replace the default locale, but this should be necessary for testing only, because the users are expected to have the correct locale set in the OS settings.
2. And using the polyfill for older browsers.

Answer 2

Do it like this:

{{price | currency:'EUR':true:'1.0-0'}}

No need for extra pipes, it uses the default currency pipe