Explain Currency filter in AngularJS. How can we use it?

by

The currency filter contains the “$” Dollar symbol as default. We can apply the following code as the html template format of Currency Filter.

{{ currency_expression | currency : symbol : fractionSize}}
We can use Currency Filter by using the following methods:

  • Default
    If we do not provide any currency symbol, then Dollar sign will be used by default as shown below:

    Default Currency{{amount | currency}}
  • User-Defined
    To use different types of currency symbols, we have to define our own symbol by applying the Hexa-Decimal code or Unicode of that Currency.
    E.g., To define Indian Currency Symbol, then we have to use Unicode-value or Hexa-Decimal value.
    Indian Currency{{amount | currency:”&# 8377″}}
  • In AngularJS, the currency filter is used to format a number as currency. It takes a number or a string as input and formats it as currency using the specified currency symbol, decimal point, and thousands separator. The general syntax for using the currency filter is as follows:
    html
    {{ expression | currency : symbol : fractionSize}}
    • expression: The input expression that represents the number you want to format as currency.
    • symbol (optional): The currency symbol to be used. It can be a string representing the currency symbol or a boolean set to true to use the default currency symbol for the current locale.
    • fractionSize (optional): The number of decimal places to round the currency value to. If not specified, it defaults to the number of decimal places present in the input value.

    Here’s an example of using the currency filter:

    html
    <!DOCTYPE html>
    <html>

    <head>
    <title>AngularJS Currency Filter</title>
    <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
    </head>

    <body ng-app=”currencyApp”>
    <div ng-controller=”currencyController”>
    <p>{{ amount | currency : ‘$’ : 2 }}</p>
    </div>

    <script>
    var app = angular.module(‘currencyApp’, []);
    app.controller(‘currencyController’, function ($scope) {
    $scope.amount = 1234.5678;
    });
    </script>
    </body>

    </html>

    In this example, the amount variable is formatted as currency using the currency filter. The symbol is set to ‘$’, and the fractionSize is set to 2, resulting in the formatted currency value “$1,234.57”.

    You can customize the filter based on your requirements, and it is particularly useful when you need to display monetary values in a user-friendly format