Angular Js currency, symbol euro after

Question

How to move the symbol euro from the front of the value to after it?

Example:

{{product.price | currency : "€"}} will produce € 12.00

but I would like 12.00 €

Answer 1

You don't have to hack the currency filter!

AngularJS has a great support for i18n/l10n. The currency filter uses the default currency symbol from the locale service and positions it based on the locale settings.

So it's all about supporting and setting the right locale.

<script src="i18n/angular-locale_de-de.js"></script> 

If you are using npm or bower all locales are available via the angular-i18n package.

<span>{{ product.price | currency }}</span> 

will now produce the following output:

65,95 € 

Supporting multiple localizations

If you want to support multiple localizations be careful with the currency symbol as it changes to the default currency of the used locale. But 65,95 € are different to $65,95. Provide the currency symbol as parameter to be safe:

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

In de-de the output would still be 65,95 € but if the location is eg. en-us it would be €65.95 (which is despite some other sayings the correct format to display euro prices in English).

To learn more about angular and i18n/l10n refer to the developer guide.

Answer 2

You can't with the currency filter. You could write your own, or just use the number filter.

{{(produce.price | number:2) + "€"}}