INR currency format

You can make a filter using toLocaleString like :

Number(data).toLocaleString('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0})

Filter example :

.filter('IndianCurrency', function() {
    return function(data) {
        if (null != data) {
            return Number(data).toLocaleString('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0});
        } else {
            return Number(0).toLocaleString('en-IN', { style: 'currency',currency: 'INR', maximumFractionDigits: 0});
        }
    };
});

Usage :

{{ rent | IndianCurrency }}

Indian rupee follows different format compare to US currency; So, don't use default angular currency filter to format Indian Rupees

Custom INR Currency Filter

var app = angular.module('app', []);

app.controller('indexCtrl', function ($scope) {
    $scope.amount = 10000000.33;
});

app.filter('INR', function () {        
    return function (input) {
        if (! isNaN(input)) {
            var currencySymbol = '₹';
            //var output = Number(input).toLocaleString('en-IN');   <-- This method is not working fine in all browsers!           
            var result = input.toString().split('.');

            var lastThree = result[0].substring(result[0].length - 3);
            var otherNumbers = result[0].substring(0, result[0].length - 3);
            if (otherNumbers != '')
                lastThree = ',' + lastThree;
            var output = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
            
            if (result.length > 1) {
                output += "." + result[1];
            }            

            return currencySymbol + output;
        }
    }
});
<!DOCTYPE html>
<html ng-app="app">
<head>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="indexCtrl">
    Input: <input type="text" ng-model="amount">
    <h3>{{amount | INR}}</h3>
</body>
</html>

Just use INR in currency filter

{{product.product_cost | currency:'INR':true}}

AngularJS

In HTML

{{ currency_expression | currency : symbol : fractionSize}}

for example

{{amount | currency:"₹":0}}

AngularJS docs Currency Pipe

Angular 2+

{{amount | currency:'INR':'symbol-narrow':'4.2-2'}}

you can also refer Currency Pipe

Tags:

Javascript

Angularjs

Recent Posts