AngularJS Currency Filter with Example

  Total Views : 663
  Comments : 0
 
  Keywords : Format number using currency filter in angularjs with example, How to use currency filter in angularjs to format numbers, How to apply currency format for number in angularjs 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

The currency filter in angularjs 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.

Syntax of Currency Filter in AngularJS

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.

Example of AngularJS Currency Filter

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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User