Using Currency Formats in AngularJS

In this post I am going to show, how we can use various currency formats along with setting fraction sizes in AngularJS. This is my 8th blog in AngularJS series.

So, we have a number variable and we want to display it in currency format. Now the formats might be different and we might or might not want to show the decimal points or may be we want to display upto 4-6 decimal places based on our requirements. So, how do we do it in simple manner without doing much manipulations in the javascript/jQuery code. AngularJS comes to helps us here out again by providing a simple currency filter. Its HTML template format is like:

{{ currency_expression | currency : symbol : fractionSize}}

Here, ‘currency_expression’ is the number variable that we want to filter, ‘currency’ is our filter name, ‘symbol’ is an optional string param where we set the currency symbol or identifier that we want to be displayed and lastly the ‘fractionSize’ is another optional number param where we define the number of decimal places we want the ‘currency_expression’ to be rounded. So, if its 34.1234 and our ‘fractionSize’ is set to 3 and the amount would be rounded to 34.123. By default, ‘fractionSize’ is set to default max fraction size for current locale. I have created a demo for this and taken currency symbol reference from here. Here is HTML code for it:-

<!-- Default symbol for current locale is used here -->
<li>{{ ctrl.amountVariable | currency }}</li>

<!-- United States Dollar - USD -->
<li>{{ ctrl.amountVariable | currency:'$' }}</li>

<!-- United Kingdom Pound - GBP -->
<li>{{ ctrl.amountVariable | currency:'£' }}</li>

<!-- Euro Member Countries - EUR -->
<li>{{ ctrl.amountVariable | currency:'€' }}</li>

<!-- China Yuan Renminbi - CNY -->
<li>{{ ctrl.amountVariable | currency:'¥' }}</li>

<!-- Ukraine Hryvnia - UAH -->
<li>{{ ctrl.amountVariable | currency:'₴' }}</li>

<!-- Costa Rica Colon - CRC -->
<li>{{ ctrl.amountVariable | currency:'₡' }}</li>

<!-- Thailand Baht - THB -->
<li>{{ ctrl.amountVariable | currency:'฿' }}</li>

<!-- United States Dollar - USD with no decimal points -->
<li>{{ ctrl.amountVariable | currency:'$':0 }}</li>

<!-- United States Dollar - USD with fractionSize 4 -->
<li>{{ ctrl.amountVariable | currency:'$':4 }}</li>

<!-- United Kingdom Pound - GBP with fractionSize 6 -->
<li>{{ ctrl.amountVariable | currency:'£':6 }}</li>

Here the ‘amountVariable’ is coming from the controller that we have used in the demo and I am showing some of the currency formats and the bottom three shows the use of fractionSize. Here is the result of this code:-

$1,234.56
$1,234.56
£1,234.56
€1,234.56
¥1,234.56
₴1,234.56
₡1,234.56
฿1,234.56
$1,235
$1,234.5612
£1,234.561235

Demo Here:
Working Demo on Plunker

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

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