In this article, we will know the currency filters in AngularJS, along with understanding its implementation through the examples. Filters are used to modify or format the given data in a certain way. AngularJS has different filters such as uppercase, lowercase, etc. One of those filters is the currency filter.
The Currency filter modifies or formats a given number into a currency. In other terms, we are just taking a number and displaying it in a specific currency format.
Syntax for HTML Template:
{{ amount | currency : symbol : fractionSize}}Syntax for JavaScript:
$filter('currency')(amount, symbol, fractionSize)Parameters: It accepts 2 parameters, which are described below:
- amount: The number input needed to format into currency.
- symbol: It is an optional parameter where we provide the symbol or identifier we want to display. By default, it is set to the dollar symbol.
- fractionSize: It round of the specific number to particular decimal places. It’s an optional parameter & by default, it is set to the default max for the current locale.
Example: This example describes the currency filter without using the optional parameters.
<html>
<head>
<title>Currency Filter</title>
<script src=
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Currency Filter without optional parameters
</h3>
<div ng-app="myApp" ng-controller="currencyCtrl">
<p>Number: {{curr}}</p>
<p>After applying currency filter: </p>
<p>Price = {{ curr | currency}}</p>
</div>
<script>
var app = angular.module('myApp', []);
var curr = 1000.5555;
app.controller('currencyCtrl', function($scope) {
$scope.curr = curr;
});
</script>
</center>
</body>
</html>
|
Output:
Currency filter without parameters
Example: This example describes the currency filter with optional parameters.
<html>
<head>
<title>Currency Filter</title>
<script src=
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Currency Filter with optional parameters</h3>
<div ng-app="myApp" ng-controller="currencyCtrl">
<p>Number: {{curr}}</p>
<p>After applying currency filter: </p>
<p>Price = {{ curr | currency : "₹" :3}}</p>
</div>
<script>
var app = angular.module('myApp', []);
var curr = 1000.5555;
app.controller('currencyCtrl', function($scope) {
$scope.curr = curr;
});
</script>
</center>
</body>
</html>
|
Output:
Currency filter with parameters