CODEWITHSUNDEEP
javascriptangularjs
Miguel Moura
Miguel Moura

Reputation: 39394

Format price in euros currency using Angular Filter

I need to display a price in euros with no fraction and a dot every 3 digits.

So the price 12350,30 would become 12.350 €.

I tried to solve this with the currency filter but I was only able to make it work with USD. I then tried the following:

<span data-ng-bind="property.price | number:0"></span>

But I get a comma every 3 digits instead of a dot.

And I am not able to add the € sign at the end.

Does anyone knows how to do this?

Upvotes: 1

Views: 2324

Answers (2)

bakkal
bakkal

Reputation: 55448

And I am not able to add the € sign at the end.

You can specify the currency symbol

{{ currency_expression | currency : symbol : fractionSize}}

So

<span data-ng-bind="property.price | currency:"€":2></span>

But I get a comma every 3 digits instead of a dot.

The decimal and group seperator depends on the locale, here a relevant part from AngularJS source code

  "NUMBER_FORMATS": {
    "CURRENCY_SYM": "\u20ac",
    "DECIMAL_SEP": ",",
    "GROUP_SEP": "\u00a0",

Source is the french (fr-fr) locale for AngularJS, https://github.com/angular/angular.js/blob/master/src/ngLocale/angular-locale_fr-fr.js#L78

Upvotes: 1

Joao Leal
Joao Leal

Reputation: 5542

Miguel,

You can create a custom filter:

app.filter('toEuros', function() {
  return function(input) {
    return Number(input).toLocaleString("es-ES", {minimumFractionDigits: 0}) + ' €';
  };
});

and then use as:

<span data-ng-bind="property.price | toEuros"></span>

(for some reason the language pt-PT puts spaces instead of . as thousands separator)

Upvotes: 1

Related Questions