Open In App

What is currency filter in AngularJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads