CODEWITHSUNDEEP
javascripthtmlangularjsangular-filters
user1809790
user1809790

Reputation: 1369

AngularJS Currency Filter - Euro

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 `€ `;
}

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

Upvotes: 4

Views: 1626

Answers (4)

Vivz
Vivz

Reputation: 6620

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 `€ `; // 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>

Upvotes: 2

user1809790
user1809790

Reputation: 1369

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.

Upvotes: 0

Vinod kumar G
Vinod kumar G

Reputation: 655

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; `;
    }

Upvotes: 0

Pritam Banerjee
Pritam Banerjee

Reputation: 18923

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>

Upvotes: 0

Related Questions