In AngularJS, the currency filter is used to format numbers as currency. It automatically adds a currency symbol and ensures proper decimal formatting.
Default currency symbol: $ (USD)
Supports custom currency symbols
Controls decimal places
1. Syntax of currency Filter
The filter is applied using the pipe (|) symbol inside AngularJS expressions.
{{ amount | currency }}
This formats the amount as currency with the default symbol ($).
2. Basic Usage of currency Filter
Let’s start with a simple example:
<p>Price: {{ 500 | currency }}</p>
Output: $500.00
3. Using currency with Scope Variables
Example: Formatting Dynamic Data
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="PriceController">
<h2>Currency Filter Example</h2>
<p>Original Price: {{ price }}</p>
<p>Formatted Price: {{ price | currency }}</p>
<script>
var app = angular.module('myApp', []);
app.controller('PriceController', function($scope) {
$scope.price = 1500;
});
</script>
</body>
</html>
Output:
Original Price: 1500
Formatted Price: $1,500.00
4. Using Different Currency Symbols
By default, AngularJS uses USD ($), but you can specify other symbols.
<p>Price in USD: {{ price | currency }}</p>
<p>Price in INR: {{ price | currency:"₹" }}</p>
<p>Price in EUR: {{ price | currency:"€" }}</p>
Output:
Price in USD: $1,500.00
Price in INR: ₹1,500.00
Price in EUR: €1,500.00
5. Controlling Decimal Places
By default, AngularJS shows two decimal places.
To customize decimal places, use number filter instead of currency.
Example: Custom Decimal Places
<p>Two decimals: {{ price | currency }}</p>
<p>No decimals: {{ price | currency:"$":0 }}</p>
<p>Three decimals: {{ price | currency:"$":3 }}</p>
Output:
Two decimals: $1,500.00
No decimals: $1,500
Three decimals: $1,500.000
6. Using currency with ng-model (User Input)
You can apply the currency filter dynamically as users type.
Example: Formatting User Input
<label>Enter Amount: </label>
<input type="number" ng-model="amount">
<p>Formatted Amount: {{ amount | currency:"₹" }}</p>
Whenever the user types, the amount is displayed in currency format.
7. Using currency in ng-repeat (Lists & Tables)
The currency filter can be used inside ng-repeat to format multiple prices dynamically.
Example: Displaying a Price List
<table border="1">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr ng-repeat="item in products">
<td>{{ item.name }}</td>
<td>{{ item.price | currency:"₹" }}</td>
</tr>
</table>
app.controller('ProductController', function($scope) {
$scope.products = [
{ name: "Laptop", price: 60000 },
{ name: "Smartphone", price: 25000 },
{ name: "Headphones", price: 1500 }
];
});
Output:
| Item | Price |
|---|---|
| Laptop | ₹60,000.00 |
| Smartphone | ₹25,000.00 |
| Headphones | ₹1,500.00 |
8. Using currency in ng-options (Dropdowns)
You can format dropdown values with the currency filter.
<select ng-model="selectedPrice" ng-options="price | currency for price in prices">
<option value="">Select Price</option>
</select>
<p>Selected Price: {{ selectedPrice | currency }}</p>
app.controller('PriceController', function($scope) {
$scope.prices = [100, 250.5, 5000, 9999.99];
});
Dropdown options are displayed in currency format.
9. Using $filter Service in Controller
The $filter service can format currency inside a controller.
Example: Formatting a Price in Controller
app.controller('CurrencyController', function($scope, $filter) {
var amount = 4500;
$scope.formattedPrice = $filter('currency')(amount, "₹");
});
This allows formatting before displaying data.
10. Using currency Filter in Directives
If you’re using custom directives, you can apply the currency filter inside the template.
Example: Custom Price Display Directive
app.directive('priceDisplay', function() {
return {
template: "<p>Price: {{ amount | currency:'₹' }}</p>",
scope: { amount: '=' }
};
});
<price-display amount="1200"></price-display>
This displays the price as ₹1,200.00.