Show Currency Symbols Other than Dollar, Such as Rupee or Pound using AngularJS “currency” Filter

I have used AngularJS currency filters in my projects, also wrote an article previously on how to format a string using AngularJS currency filter. Consider this article related to the previous one, as here I am going to show you how to use the currency filter to get the output in Rupee (or perhaps Pound and Euro) instead of dollar.

The dollar ($) as you know, is the default symbol for Angular currency filter. To get the result in other symbol, for example Rupee (₹), you must explicitly define it in your app. You can define any other currency symbol (if not just Rupee), using HTML entities for currency.

There are two different HTML entities for Rupee.

1) For Rs - 8360
2) For ₹ symbol - 8377

Now, let’s see how you can add these symbols in your AngularJS app with the currency filter.

AngularJS currency Filter with ₹ Rupee symbol

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

    <div ng-app>
        <p>
            <label>Enter a number</label>
            <input type="text" ng-model="bid" />
        </p>

        <p> {{ bid | currency:'&#8377;' }} </p>
    </div>
</body>

Try it

For the rupee symbol I have used decimal 8377 prefixed with symbols & and #, just after the currency filter.

See this Demo 👇

Enter a number:

currency Filter with Rupee Sign Rs

In the above example, simply replace 8377 with 8360 to get the result in "Rs".

 <p> {{ bid | currency:'&#8360' }} </p>

Injecting AngularJS currency Filter Rupee in Controller

You can inject the currency filter with the Rupee symbol (₹) in your applications controller. Not just the symbol, you can even add signs like INR, "Rupee" and Rs in the controller.

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>

<body>
    <div ng-app="biddingApp" ng-controller="bidController">
        <p>
            <label>Enter a number</label>
            <input type="text" ng-model="bid" />
        </p>

        <p> {{ result }} </p>
    </div>
</body>

<script>
    var bidApp = angular.module('biddingApp', []);

    bidApp.controller(
        'bidController',
        function ($scope, $filter) {

            $scope.$watch('bid', function (val) {
                $scope.result = $filter('currency')(val, '₹', 2);
            }, true);
        }
    );
</script>
</html>

Try it

I have defined the currency filter, with 3 parameters. The val has a numeric value, followed by Rupee symbol and assigned a value "2" for two decimals.

You can replace the Rupee symbol with other world currency symbols, such as, $, €, £ etc.
Here’s a small list.

₹
Indian Rupee

€
Euro

$
Dollar

£
British Pound

¥
Japanese Yen

₪
Israel Sheqel

₴
Ukrainie Hryvnia

₩
South & North Korean Won

₱
Philippines Peso

zł
Poland Zloty

฿
Thai Baht

₫
Vietnam Dong

Source: World Currency Symbols

← PreviousNext →