AngularJS Currency Filter - Euro

Question

I am using AngularJS currency filter and am having problems displaying the Euro sign correctly.

The HTML:

{{ price.priceTotal | currency: myController.getPriceCurrency() }}

Controller:

getPriceCurrency() {
    return `&#8364; `;
}

Note - In the above method I am just returning the code for the Euro symbol, but the currency returned by this method can be any, depending on the currency selected.

The problem I have is that the currency symbol does not display properly. It is displaying as € 50for example, but I want it to display as € 50. I have tried to set the return in getPriceCurrency method to the euro sign € directly, however that would end up being displayed as ??? (three question marks) once the code is deployed.

Are there any other workarounds I can do to get euro and other currencies symbols displaying properly?

Thanks

Possible duplicate of [How to get specific currency symbol(rupee symbol in my case) in angular js instead of the default one (dollar $ symbol)](https://stackoverflow.com/questions/18612212/how-to-get-specific-currency-symbolrupee-symbol-in-my-case-in-angular-js-inste) — Vivz, Sep 01 '17 at 05:30
@Vivz my issue is not HOW to display the currency symbol. I know I can use an angular js filter for that. My issue is that the currency symbol is not displaying correctly which is a different one. — user1809790, Sep 01 '17 at 05:41
Check the below answer and see if it is what you are looking for — Vivz, Sep 01 '17 at 06:05

Vivz · Answer 1 · 2017-09-01T07:21:48.620

You can use $sce of ngSanitize module to do this. This is to make sure that the html can be trusted and to prevent any vulnerable XSS attacks. Angular will not convert string € directly to euro symbol.

var app = angular.module("app", ["ngSanitize"]);
 app.controller("myCtrl", function($scope, $filter,$sce) {
   var vm =this;
   vm.price=100;
   vm.getPriceCurrency=function() {
     return `&#8364; `; // return any currency
}
 });
 app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script>
</head>
<body ng-controller="myCtrl as myController">
<!-- binding the currency to html -->
    <div ng-bind-html="myController.price | currency: myController.getPriceCurrency()| unsafe">
    </div>
</body>
</html>

score 0 · Answer 2 · answered Sep 01 '17 at 05:24

Try this(Refer the official documentation for more information):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="currencyExample">
  <script>
  angular.module('currencyExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.amount = 1234.56;
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="number" ng-model="amount" aria-label="amount"> <br>
  default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
  custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span><br>
  no fractions (0): <span id="currency-no-fractions">{{amount | currency:"&euro;":0}}</span>
</div>
</body>
</html>

when i set the currency:"&euro" in the html that works fine. But this is not what i need. I need to get the currency from the controller as it is dynamic. The thing is that when i return for example &euro from the controller, it is being displayed like that rather than the appropriate Euro sign. — user1809790, Sep 01 '17 at 06:03

score 0 · Answer 3 · answered Sep 01 '17 at 05:25

0

Use this

  {{ price.priceTotal | currency: myController.getPriceCurrency() | currency:"&euro;"}}
    or
{{ price.priceTotal | currency: myController.getPriceCurrency() |  currency : "€"}}

In controller just return the value

    getPriceCurrency() {
        return `8364; `;
    }

answered Sep 01 '17 at 05:25

Vinod kumar G

639
6
17

when I add two currency filters I do not get anything, not even the price. – user1809790 Sep 01 '17 at 05:37

score 0 · Accepted Answer · answered Sep 01 '17 at 07:09

0

I managed to solve it by using ng-bind-html:

ng-bind-html="myController.price | currency: myController.getPriceCurrency()"

This treated my currency as HTML and displayed it correctly.

answered Sep 01 '17 at 07:09

user1809790

1,349
5
24
53

AngularJS Currency Filter - Euro

4 Answers4