currency filter – Formatting currency values

In AngularJS, the currency filter is used to format numerical values as currency. This filter automatically applies currency symbols and decimal precision to numbers in an AngularJS application.

1. How to Use the Currency Filter?

The currency filter can be applied in AngularJS templates using the pipe (|) symbol.

Basic Syntax

{{ amount | currency }}

If amount = 1000, this will display:
$1,000.00 (assuming default USD currency settings).

Customizing Currency Symbols

By default, AngularJS uses the US Dollar ($) symbol, but you can specify a different currency symbol.

Example: Display Amount in Indian Rupees (INR)

{{ amount | currency: "₹" }}

Output:
If amount = 5000, the result will be:
₹5,000.00

2. Controlling Decimal Precision

You can control the number of decimal places using an additional argument.

Syntax

{{ amount | currency : symbol : decimalPlaces }}

symbol → The currency symbol (optional).
decimalPlaces → The number of decimal places (optional).

Example: Customizing Decimal Places

{{ amount | currency:"€":0 }}

Output:
If amount = 999.99, the result will be:
€1,000 (rounded to 0 decimal places).

3. Using the Currency Filter in a Controller

You can use the $filter service in an AngularJS controller to apply the currency filter programmatically.

Example: Using `$filter` in a Controller

app.controller('MainCtrl', function($scope, $filter) {
    var amount = 1234.567;
    $scope.formattedAmount = $filter('currency')(amount, '₹', 2);
});

This will store “₹1,234.57” in $scope.formattedAmount.

Displaying in HTML

<p>{{ formattedAmount }}</p>

Output:
₹1,234.57

4. How the Currency Filter Works Internally

Step-by-Step Execution

Detects the | currency syntax in the AngularJS template.
Retrieves the currency filter function from AngularJS’s $filterProvider.
Formats the number:
- Adds the currency symbol (default: $).
- Inserts thousand separators.
- Rounds the number to two decimal places (by default).
Replaces the original expression with the formatted currency value.

5. Custom Currency Filter

If you need a custom formatting style, you can create your own currency filter.

Example: Custom Currency Filter

app.filter('customCurrency', function() {
    return function(input, symbol, decimalPlaces) {
        if (!input) return '';
        symbol = symbol || '$'; // Default to $
        decimalPlaces = decimalPlaces === undefined ? 2 : decimalPlaces;
        return symbol + parseFloat(input).toFixed(decimalPlaces);
    };
});

Usage in HTML

<p>{{ 5000 | customCurrency:"₹":0 }}</p>

Output:
₹5000

6. Performance Considerations

Using the currency filter inside ng-repeat can impact performance.

Avoid Using Filters Inside `ng-repeat`

<li ng-repeat="item in prices">
  {{ item | currency }}
</li>

Problem:
Each digest cycle, AngularJS re-applies the filter, slowing down rendering.

Optimize by Using a Precomputed Value

$scope.formattedPrices = prices.map(p => $filter('currency')(p));

<li ng-repeat="price in formattedPrices">
  {{ price }}
</li>

Improvement:
Pre-filtering the values prevents unnecessary recalculations.