CODEWITHSUNDEEP
javascriptangularjscurrency
corsaro
corsaro

Reputation: 773

Angular Js currency, symbol euro after

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 €

Upvotes: 33

Views: 54214

Answers (9)

SAMUEL
SAMUEL

Reputation: 8562

Angularjs has a great support for internationalization and localization. The application of internationalization and localization depends on the scope of your application. For example if your application only support euro then you need only the localization for euro and does not require all the currency and its formatting.

In such situation (Assuming your situation is similar to above ) you can create an app configuration and set locale as the localization you required using some decorators. A decorator function intercepts the creation of a service, allowing it to override or modify the behavior of the service.

angular
  .module('app', [])
  .config(['$provide', function($provide) {
    $provide.decorator('$locale', ['$delegate', function($delegate) {
      $delegate.NUMBER_FORMATS = {
        DECIMAL_SEP: '.',
        GROUP_SEP: ',',
        PATTERNS: [{ // Decimal Pattern
          minInt: 1,
          minFrac: 0,
          maxFrac: 3,
          posPre: '',
          posSuf: '',
          negPre: '-',
          negSuf: '',
          gSize: 3,
          lgSize: 3
        }, { //Currency Pattern
          minInt: 1,
          minFrac: 0,
          maxFrac: 1,
          posPre: '\u00A4',
          posSuf: '',
          negPre: '(\u00A4',
          negSuf: ')',
          gSize: 3,
          lgSize: 3
        }],
        CURRENCY_SYM: '€'
      }
      return $delegate;
    }]);
  }])
  .controller('appController', ['$scope', function($scope) {
    $scope.price = 20.55;
  }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appController">
    Price : {{price | currency}}
  </div>
</div>

The above configuration shows all possible values for decimal and currency settings. You can change according to your requirements at app level.

If you dont want the effect to be in entire application better is to go for a directive

Upvotes: 2

Mugshep
Mugshep

Reputation: 828

Using the locale (as explained in the answer in this thread - at Angular Js currency, symbol euro after) seems like the most correct way to do it, but it doesn't seem to offer the flexibility to put the currency symbol or name where you want it relative to the value you're referencing to. If you need to have your currency symbol after your value, you could have a separate product.currency field and interpolate that after (or before) your price value.

So if you have product.price = 40 and product.currency = '€', you could display it as 40 € with {{product.price}} {{product.currency}}. Or € 40 by reversing the fields: {{product.currency}} {{product.price}}.

You'd probably want to format the product.price values via the decimal pipe if you did that (https://angular.io/api/common/DecimalPipe). - So "40.00 €" would be : {{product.amount | number:'2.2-2'}} {{product.currency}}.

fyi - in this case, I'd probably have a separate field product.currency and product.currencySymbol (e.g. "USD" and "$" respectively), but then you're getting more into the functionality of the locale as referenced in the other answer I link above. But if you need to place the currency name or symbol in a different location relative to the value than what Angular will let you do via its native pipes, and want to use a currency that's specific to a record or set that you're working with without hard-coding its symbol or name on the page (e.g. if you have multiple currencies you're displaying), this is one way to do it dynamically.

Upvotes: 0

St&#233;phane GRILLON
St&#233;phane GRILLON

Reputation: 11884

I use this solution in my project (in production) in France (It must ALWAYS show 5.00€, NEVER show €5.00):

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

DEMO

Please, read the real question of this post (Angular Js currency, symbol euro after) before downvote too quickly!!!!!

Upvotes: 1

ng-helper
ng-helper

Reputation: 1

You can create a filter :

app.filter('euroFormat', function () {
    return function (input) {
        return input+' \u20AC';
    };
});

and apply it on your html code with :

<span>Price: {{product.price| euroFormat}}</span>

Upvotes: -1

Frederik Kammer
Frederik Kammer

Reputation: 3177

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.

Upvotes: 60

Samantha A
Samantha A

Reputation: 11

It's quite an old question, it's different these days.. Maybe it was back then aswell..

So if someone else finds this..

But you need to include the correct locale to get the correct currency formatting in the currency filter.

Check the angular documentation, for example dutch currency formatting is € 5,00 While english is 5,00 € and american is €5.00

Upvotes: 1

Zauker
Zauker

Reputation: 2394

The solutions proposed are all dirty.

at first, the filter allow change symbol by add it as parameter:

{{product.price | currency : "€"}}

but the right way is localize your app as suggested by @Andreas if you localize your app for example with italian locale setting (it-it) inside your app you need only invoke the filter to obtain the € sign.

{{product.price | currency }}

Italian locale setting put the Euro sign before the currency value. You could change che locale value, or much better override them as proposed in the follow linked answer:

Why AngularJS currency filter formats negative numbers with parenthesis?

you could override the locale setting put your currency symbol (\u00A4) as a prefix or suffix for positive value and negative too.

app.config(['$provide', function($provide) {
    $provide.decorator('$locale', ['$delegate', function($delegate) {
      if($delegate.id == 'it-it') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '\u00A4\u00a0-';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posPre = '\u00A4\u00a0';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posSuf = '';
      }
      return $delegate;
    }]);
  }]);

so after this instruction the filter:

{{product.price | currency}}

will produce the follow output

€ 12

Upvotes: 3

drskur
drskur

Reputation: 329

use this trick.

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

Upvotes: 4

Reactgular
Reactgular

Reputation: 54821

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

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

Upvotes: 18

Related Questions