Angular Js currency, symbol euro after

by

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="https://stackoverflow.com/questions/27547680/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.

More Related Contents:

  1. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  2. How to display length of filtered ng-repeat data
  3. Clicking a button within a form causes page refresh
  4. How to dynamically change header based on AngularJS partial view?
  5. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  6. What’s the recommended way to extend AngularJS controllers?
  7. Losing scope when using ng-include
  8. SyntaxError: Unexpected token o in JSON at position 1
  9. How does the $resource `get` function work synchronously in AngularJS?
  10. angularjs: allows only numbers to be typed into a text box
  11. Using Jquery Datatable with AngularJs
  12. How do I use Bluebird with Angular?
  13. How to implement history.back() in angular.js
  14. How to debug angular protractor tests in WebStorm
  15. What’s the difference/incompatibility between ng-model and ng-value?
  16. Global Ajax error handler with AngularJS
  17. Angular JS custom delimiter
  18. Where to put model data and behaviour? [tl; dr; Use Services]
  19. Pass variables to AngularJS controller, best practice?
  20. Using Inline Templates in AngularJS
  21. How can I handle browser tab close event in Angular? Only close, not refresh
  22. Using jqgrid with popover from angular ui bootstrap
  23. how to change the headers for angularjs $http.jsonp
  24. How can I access the value of a promise?
  25. Open links in new window using AngularJS
  26. AngularJS ng-src inside of iframe
  27. Difference between $state.transitionTo() and $state.go() in Angular ui-router
  28. Passing parameter inside $location.path in Angular
  29. How do I return data from a $http.get() inside a factory in angularjs
  30. How to create an Array with AngularJS’s ng-model

Leave a Comment