Advertisements

Currency Filter In Angular Js


Introduction :

In this article you will learn about Currency Filter in Angular Js.

 

AngularJs : AngularJS is a JavaScript framework. It was originally developed by Hevery and Adam Abrons. Now it’s maintained by Google. Angular Js is light weight and easy to learn. It is perfect in Single Page Application projects. Angular Js is open source, free of cost and easy to handle.

Currency Filter

One of the filter in Angular Js is Currency Filter.This “currency” filter include “$” Dollar Symbol as default.So we can use the following code as the html template format of Currency Filter.

{{ currency_expression | currency : symbol : fractionSize}}

Code 

Html :

The following html code contain the root directory “ng-app” & Controller “ng-controller”.So you can create any name for it.The angular js currency filter contain “$” Dollar symbol as default.

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
   <input type="number" ng-model="amount">
   <h2>{{ amount | currency }}</h2>
</div>

Angular Js :

When we are run this following code you will get the result as “$1000”.So you can change this “$” Dollar symbol based on the html template format of Currency Filter.

var myApp = angular.module('CurrencyApp', []);
myApp.controller('CurrencyController', function($scope) {
  $scope.amount = 1000;
});

Demo : Currency Filter In AngularJS

Removing Default Symbol Of Currency Filter

Html :
In the following code value=”” , So the default Symbol “$” Dollar will be removed.

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
   
   <input type="number" ng-model="amount">
   <h2>{{ amount | currency : value="" }}</h2>
   <!-- or-->
   <h2>{{ amount | currency : "" }}</h2>

</div>

Demo : Removing the default symbol ( $ ) of currency filter in Angular Js

List Of Countries and Their Currency Using Angular Js

Html :

The following code contain the currency symbol for respective countries.


<h3>Countries & Their Currency Using AngularJS</h3>
<div ng-app="CurrencyApp" ng-controller="CurrencyController">
  <input type="number" ng-model="amount">
<h3>
   Removed default currency($) :  {{ amount | currency : "" }}  
</h3>
<h3>
   Default currency($) :  {{ amount | currency }}  
</h3>
<h3>
   Indian Currency: {{amount | currency:"&#8377"}}
</h3>
<h3>
   US Dollar - USD :  {{ amount | currency : "$" }}  
</h3>
<h3>
   United Kingdom Pound - GBP : {{amount | currency:"£"}}
</h3>
<h3>
   Thailand Baht - THB : {{amount | currency:"฿"}}
</h3>
<h3>
   China Yuan Renminbi - CNY : {{amount | currency:"¥"}}
</h3>
<h3>
   Costa Rica Colon - CRC : {{amount | currency:"₡"}}
</h3>
<h3>
    Ukraine Hryvnia - UAH  : {{amount | currency:"₴"}}
</h3>
</div>

Angular Js :

var myApp = angular.module('CurrencyApp', []);
myApp.controller('CurrencyController', function($scope) {
  $scope.amount = 1000;
});

Demo : Countries & Their Currency Using AngularJS

Fraction Size In AngularJS Currency Filter

We can use the fraction size in currency filter.The following code we added 3 as the fraction size so it added 3 zeros in result.

Html :


<h3>Fraction Size In AngularJS Currency Filter</h3>

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
  <input type="number" ng-model="amount">
<h3>
    Amount :  {{ amount | currency : "$" : 3 }}  
</h3>
</div>

Demo : Fraction Size In AngularJS Currency Filter

Reference :

Summary

We learned how to use Currency Filter In Angular Js. I hope this article is useful for all beginners.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: