How to get specific currency symbol(rupee symbol in my case) in angular js instead of the default one (dollar $ symbol)

Question

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.

This is a better solution :D https://stackoverflow.com/questions/27547680/angular-js-currency-symbol-euro-after#34953870 — openHex, Nov 09 '17 at 21:18

JQuery Guru · Accepted Answer · 2013-12-28T07:33:05.910

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;')

edited Dec 28 '13 at 07:33

answered Sep 04 '13 at 11:31

JQuery Guru

6,943
1
33
40

@Ebenezar I thought you needed to show rupee symbol not euro. – Foreever Dec 24 '13 at 07: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 ! – Ebenezar John Paul Dec 24 '13 at 07:39
@Ebenezar See my answer then. Tested it as well. – Foreever Dec 24 '13 at 09: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 08 '14 at 06:50

score 6 · Answer 2 · answered Sep 04 '13 at 11:12

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

answered Sep 04 '13 at 11:12

Scalpweb

1,971
1
12
14

2

Try as follow: currency:[€] If the € sign does not appear on your example, it's probably due to your file encoding. – Scalpweb Sep 04 '13 at 11:26

Simon Wicki · Answer 3 · 2015-09-19T16:14:57.013

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

edited Sep 19 '15 at 16:14

answered Dec 19 '14 at 00:09

Simon Wicki

4,029
4
22
25

mahesh · Answer 4 · 2018-03-16T09:00:06.033

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)

Foreever · Answer 5 · 2013-12-24T09:30:22.320

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

score 3 · Answer 6 · answered Jul 12 '16 at 15:13

$ 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 : '₹' }}</b> </span>

₹ is the HTML code for ₹ symbol.

score 3 · Answer 7 · answered Mar 30 '17 at 02:59

3

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

answered Mar 30 '17 at 02:59

Naresh

31
1

score 3 · Answer 8 · answered Jan 01 '18 at 09:13

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
};

score 2 · Answer 9 · answered Jul 14 '16 at 10:06

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>

"₹" is the character code of :"₹"

For more visit this [link](http://symbolcodes.tlt.psu.edu/bylanguage/devanagarichart.html) — , Jul 14 '16 at 10:12

score 1 · Answer 10 · answered Sep 04 '13 at 11:12

1

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

Simple with:

currency:"USD$"

and instead of USD$ use what ever you want

answered Sep 04 '13 at 11:12

tea2code

1,007
1
8
15

Deepu Reghunath · Answer 11 · 2018-04-03T11:48:37.913

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

How to get specific currency symbol(rupee symbol in my case) in angular js instead of the default one (dollar $ symbol)

11 Answers11

Linked