Here we will learn currency filter in angularjs, use of currency filter in angularjs and how to use angularjs currency filter to format number to currency format with simple example.
In angularjs, currency filter is used to format number as a currency like $1,200.00. By default currency filter in angularjs is used dollar ($) symbol to format numbers in case if we want to apply our own custom symbols we can use with currency filter.
Following is the syntax of currency filter in angularjs applications
E.g Suppose if we give expression like {{1000 | currency}} by default it will format our number and return result like $1,000.00.
We will see how to use currency filter in angularjs application with or without decimal values and with custom currency formats.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Currency filter Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularcurrencyApp", []);
app.controller("currencyctrl", function ($scope) {
$scope.sampleval = 52343.1435784;
});
</script>
</head>
<body ng-app="AngularcurrencyApp">
<div ng-controller="currencyctrl">
Enter Number: <input type="text" ng-model="sampleval" /><br /><br />
Default Currency expression:{{sampleval | currency}}<br /><br />
Currency with Custom Value: {{sampleval | currency : "USD$"}} <br /><br />
Currency with Zero Decimals: {{sampleval | currency : "USD$" : 0}}
</div>
</body>
</html>
If you observe above code we applied currency filter with and without decimal values expression and with custom currency icons to display number. It will format our number to currency format. Now we will run and see the output
Following is the resu;t of angularjs currency filter example.
This is how we can use currency filter in angularjs applications to format number and display it in currency format.