What is currency filter in AngularJS ?
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
<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
<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
Please Login to comment...