AngularJS Currency Filter with Example

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.

AngularJS Currency Filter

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.

AngularJS Currency Filter Syntax

Following is the syntax of currency filter in angularjs applications

 

{{currencyexpression | currency : symbol : fractionsize}}

E.g Suppose if we give expression like {{1000 | currency}} by default it will format our number and return result like $1,000.00.

AngularJS Currency Filter Example

We will see how to use currency filter in angularjs application with or without decimal values and with custom currency formats.

 

Live Preview

<!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

Output of AngularJS currency Filter Example

Following is the resu;t of angularjs currency filter example.

 

Angularjs Currency Filter Example with Output or Result

 

This is how we can use currency filter in angularjs applications to format number and display it in currency format.