Updated March 28, 2023
Introduction to AngularJS Currency Filter
In AngularJS framework filters allow us to format the data and display it on user interface/screen without changing the original format of the data, filters transform data only on UI. AngularJS provides us many inbuilt filters, we can directly use these filters in our AngularJS project.
Currency Filter: Currency filter is one of the built-in filter provided by AngularJS framework, it is one of the common use cases of built-in AngularJS filters. Here is the syntax for AngularJS filter:
Syntax:
<div ng-app>
<p>
<label>Please enter the amount: </label>
<input type="text" ng-model="bid" />
</p>
<p> {{bid | currency}} </p>
</div>Currency filter formats numeric data into specified currency format and fraction and prefix currency symbol before the numeric value. The default currency for AngularJS currency filter in $ (US dollar) and default fraction size is 2. In the code example, we have a model name bid, to use a filter in AngularJS, we use the | (pipe) symbol.
Output:
Passing Parameters to Currency Filter
AngularJS built-in currency filter accepts two optional parameters, those are currency Symbol and fraction size of currency. The dollar is a generic symbol of currency filter provided by the AngularJS framework.
Examples of AngularJS Currency Filter
Below is another example of a currency filter with full code.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Currency Filter example in AngularJS</title>
</head>
<body>
<div ng-app="myApp" ng-controller="currencyController">
<h2>
Currency filter example without currency symbol and fraction size.
</h2>
<p>Amount: {{value|currency} } </p>
</div>
<script>
var myApp = angular.module('myApp', []); myApp.controller('currencyController', function($scope) {
$scope.value = 450;
}) ;
</script>
</body>
</html>The above code first creates an angularJS application/module name myApp and then a controller name currencyController in myApp angularJS module. In the currency controller module, code example uses an angular scope object and then a value variable inside $scope in the controller.
The value of the value variable is set to 450, here the example does not use any currency symbol and fraction size, so default values are used by angularJS.
Output:
Example #2
Currency Filter Example with Currency Symbol and without Fraction Size: This code example demonstrates the use of currency symbol before the amount, we can have to pass currency symbol for all the currency except US dollar, which is default symbol for AngularJS filters, but if we want to specify further, we can use $ symbol in case we want to have default symbol. The example uses a value for currency symbol and a default value for fraction size.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Currency Filter example in AngularJS</title>
</head>
<body>
<div ng-app="myApp" ng-controller="currencyController">
<h2>
Currency filter example with currency symbol and without fraction size.
</h2>
<p>Amount with Rupee Symbol : {{value | currency: '₹'} } </p>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('currencyController',
function($scope) {
$scope.value = 450;
}) ;
</script>
</body>
</html>The above code uses the INR (Rupee — ₹) Symbol as string input in the first parameter of currency filter provided by AngularJS, so this currency filter appends ₹ before the amount that is 450. In the same way, we can add any currency symbol before value, to represent value in that currency. String ‘₹’ is Unicode for rupee symbol, in general, we should use Unicode for currency symbols because Unicode works better than String values on many browsers and the symbol strings might not be understood by some old browsers.
Output:
Example #3
Currency Filter Example with Currency Symbol and Fraction Size: The third code example in the series uses both currency symbol and fraction size, fraction size is the second parameter we can pass in currency filter, it specifies the number of zeros to be placed after the whole number in currency, a typical example can be of US dollar, like $450.55 (45o dollar and 55 cents) here .55 is the fraction, and it goes to two decimal places, same is the case with INR it also has two decimal places post a whole number, an example could be 450.50, like 450 rupees and fifty paise. The default value for the fraction size is two.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Currency Filter example in AngularJS</title>
</head>
<body>
<div ng-app="myApp" ng-controller="currencyController">
<h2>
Currency filter example with currency symbol and with fraction size.
</h2>
<p>Amount: {{value | currency: '₹': 3 } } </p>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('currencyController', function($scope) {
$scope.value = 450;
});
</script>
</body>
</html>In the above code, the currency symbol is the rupee and fraction size is three, so the output has three zero or three decimal points i.e. ₹450.000. In most of the cases decimal points would be two. So as per our requirement, we can pass any of these two values or use the default.
Output:
Example #4
Custom filter for Currency: In some specific cases default currency filter may not work, in those corner cases, we can write our own custom filter to format currency per standardization of currency. One typical example of such currency is INR, the comma separation in Indian format a custom requirement, as it follows the first comma after three digits and then after two digits. Like a valid Currency, the format is ₹45,00,000.00, the first comma is after three zeros and the other one is after two zeros, such cases are not handled in built-in AngularJS filter. To handle such a case, we can create a filter using. filter API provided by AngularJS to return a new comma formatted string.
Custom INR filter with correct comma’s:
Code:
myApp.filter('INRFilter' , function () { return function (amount) {
if (! isNaN(amount)) {
let currencySymbol = '₹'
let result = amount.toString().split('.');
let lastThree = result[0].substring(result[0].length - 3);
let otherNumbers = result[0].substring(0, result[0].length - 3); if (otherNumbers != '')
lastThree = ',' + lastThree;
let output = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree; if (result.length > 1) {
output += "." + result[1];
}
return currencySymbol + output;
}
}
} ) ;Above is the code example, it handles the peculiar case of comma’s of Indian Currency or number system, where we have lakhs and not millions and billions.
Recommended Articles
This is a guide to AngularJS Currency Filter. Here we discuss the Introduction and passing parameters to currency filter along with different examples and its code implementation. You may also have a look at the following articles to learn more –
