36

When i use 'currency' in angular js, I am getting a dollar symbol. How to get required currency symbols based on the requirements. As if now i need to know how to display a rupee symbol using currency. It will be of great use if anyone could explain how to make use of this currency for different symbols at the times of different requirements.

sample :

Item Price<span style="font-weight:bold;">{{item.price | currency}}</span>

If my item.price is 200. Here it shows 200$. I need to display rupee symbol instead of dollar.

1

11 Answers 11

68

To display currency symbol in angular js you need provide HTML entity for currency symbols below are the examples and usage in through code and in template :

Inside your Template example of Euro:

Item Price<span style="font-weight:bold;">{{price | currency:"&euro;"}}</span>

example of Rupee:

Item Price<span style="font-weight:bold;">{{price | currency:"&#8377;"}}</span>

Also check below url

http://www.cs.tut.fi/~jkorpela/html/euro.html

From controller :

Inject $filter in your controller

$scope.price=$filter('currency')($scope.price,'&euro;')
4
  • @Ebenezar I thought you needed to show rupee symbol not euro.
    – Foreever
    Dec 24, 2013 at 7:13
  • @Foreever Yes i needed rupee symbol. As you can see from the answers i have not recieved the exact solution. By this one atleast i learned how to make use of different currency symbols by trying with euro. Still waiting for rupee though ! Dec 24, 2013 at 7:39
  • @Ebenezar See my answer then. Tested it as well.
    – Foreever
    Dec 24, 2013 at 9:28
  • @JQuery Guru I am new to angular and also read the currency doc for angular but i am unable to understand which of the two option(i.e. "In HTML Template Binding" , "In Javascript" ) is used i have tried for both but only one is working HTML one but i want the same from javascript
    – dev_khan
    May 8, 2014 at 6:50
6

You can use the symbol parameter:

Item Price<span style="font-weight:bold;">{{item.price | currency[:symbol]}}</span>

Exemple:

Item Price<span style="font-weight:bold;">{{item.price | currency:"USD$"}}</span>

Please refer to this:

http://docs.angularjs.org/api/ng.filter:currency
1
  • 2
    Try as follow: currency:[&euro;] If the € sign does not appear on your example, it's probably due to your file encoding.
    – Scalpweb
    Sep 4, 2013 at 11:26
5

I'm late to the party but worked on this filter for my last project.

if you have the ISO 4217 currency code (3 chars length e.g. USD, EUR, etc) isoCurrency can output the right format, fraction size and symbol.

// in controller
$scope.amount = 50.50;
$scope.currency = 'USD';

// in template
{{ amount | isoCurrency:currency }} // $50.50
5

Simple solution giving for the INR currency.

If you want to display symbol

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR'}}</span>

or

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'symbol'}}</span>

or

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'symbol-narrow'}}</span>

Result will look like: ₹140.00

Or If you want to display code instead of symbol then use following

 Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'code'}}</span>

Result will look like : INR140.00

Similarly you can check for the code of the other countries and replace that instead of INR(India Code)

3

The currency symbol can be changed from the default $ symbol to something else as follows:
In HTML Template Binding

 {{ currency_expression | currency[:symbol] }} 

In JavaScript

 $filter('currency')(amount[, symbol]) 

We can display rupee symbol(in this case) for example as follows:
In HTML Template Binding

Item Price<span style="font-weight:bold;">{{price | currency:"&#8377;"}}</span> 

OR

In JavaScript

$scope.price=$filter('currency')($scope.price,"&#8377;")

Also, we can add a text rather than a symbol if needed as follows:

Item Price<span style="font-weight:bold;">{{price | currency:"rupee"}}</span> 

Note: Copying rupee symbol directly into HTML will not work.

See AngularJS currency documentation

3

$ is the default symbol for angular currency filter. To get the result in other symbol, for example Rupee (₹), you must explicitly define it in your app. For displaying ₹ symbol you just have to add an option in currency.

Example:

<span> <b>{{i.price | currency : '&#8377;' }}</b> </span>

&#8377; is the HTML code for ₹ symbol.

3
<h2>{{8.99 | currency:'INR':true}}</h2>
0
2

According to Angular JS docs Link the currency can be changed

Item Price<span style="font-weight:bold;">{{price | currency:[symbol]}}</span>
Item Price in Dollar<span style="font-weight:bold;">{{price | currency:"USD$"}}</span>
Item Price in Euro<span style="font-weight:bold;">{{price | currency:"&euro;"}}</span>

And for INR it will be character code Link2

Item Price in Ruppese<span style="font-weight:bold;">{{price | currency:"&#8377;"}}</span>

"&#8377;" is the character code of :"₹"

1
  • For more visit this link
    – user6132703
    Jul 14, 2016 at 10:12
2

if you want to make it dynamic, here is my solution:

HTML

<div>{{ 100 | currencySymbol: 'USD' }}</div>

Filter

angular.filter('currencySymbol', function ($filter) {
    return function(amount, currency) {
        return $filter('currency')(amount, currency_symbols[currency]);
    }
});

Javascript currency array

var currency_symbols = {
    'USD': '$', // US Dollar
    'EUR': '€', // Euro
    'GBP': '£', // British Pound Sterling
    'ILS': '₪', // Israeli New Sheqel
    'INR': '₹', // Indian Rupee
    'JPY': '¥', // Japanese Yen
    'KRW': '₩', // South Korean Won
    'NGN': '₦', // Nigerian Naira
    'PHP': '₱', // Philippine Peso
    'PLN': 'zł', // Polish Zloty
    'PYG': '₲', // Paraguayan Guarani
    'THB': '฿', // Thai Baht
    'UAH': '₴', // Ukrainian Hryvnia
    'VND': '₫', // Vietnamese Dong
};
1

See: http://docs.angularjs.org/api/ng.filter:currency

Simple with:

currency:"USD$"

and instead of USD$ use what ever you want

0
0

Currency pipe has 3 parameters

1. Desire currency code.

.

2. A Boolean value to indicate whether to display the currency symbol.

.

3. Digit info(has 3 parts): consist of minimum number of integer digit, minimum number of fractional digit and maximum number of fractional digit.
<span>{{value| currency:'1':2:'3'}}</span>

Example

<span>{{9.667| currency:'USD':true:'2.2-3'}}</span>

Output

$09.667

Refer for more details: https://angular.io/api/common/CurrencyPipe

For currency code: https://en.wikipedia.org/wiki/ISO_4217

If you want to show the currency in Indian rupee. use code INR

<span>{{100| currency:'INR':true}}</span>

Output

₹100.00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.