How to add other currency formats like euro to currency filter in AngularJS ?
<div ng-app>
<p>
<label>Enter Cost</label>
<input type="text" ng-model="cost" />
</p>
<p> {{ cost | currency }} </p>
</div>
5 Answers
You could choose to create a custom filter for your currency of choice. However according to Angulars Documentation on the Currency Filter that you can simply provide the symbol, currency abbreviation, and decimal place formatters for your currency .
In HTML Template Binding :
{{ currency_expression | currency : symbol : fractionSize}}
In JavaScript :
$filter('currency')(amount, symbol, fractionSize)
Comments
You can pass in html entities after currency:. Here are a couple examples.
Item Price<span style="font-weight:bold;">{{price | currency:"€"}}</span>
Item Price<span style="font-weight:bold;">{{price | currency:"¥"}}</span>
From the documentation, the format for this filter is
{{ currency_expression | currency : symbol : fractionSize}}
Comments
<div ng-app>
<p>
<label>Enter Cost</label>
<input type="text" ng-model="cost" />
</p>
<!-- Change USD$ to the currency symbol you want -->
<p> {{cost| currency:"USD$"}} </p>
</div>
Comments
As described in the documentation, simply add the currency symbol you want after the filter.
<p> {{ cost | currency : '€' }} </p>
Comments
// Setup the filter
app.filter('customCurrency', function() {
// Create the return function and set the required parameter name to **input**
// setup optional parameters for the currency symbol and location (left or right of the amount)
return function(input, symbol, place) {
// Ensure that we are working with a number
if(isNaN(input)) {
return input;
} else {
// Check if optional parameters are passed, if not, use the defaults
var symbol = symbol || '$';
var place = place === undefined ? true : place;
// Perform the operation to set the symbol in the right location
if( place === true) {
return symbol + input;
} else {
return input + symbol;
}
}
}
Then pass whatever currency you need.
<ul class="list">
<li>{{example1 | customCurrency}} - Default</li>
<li>{{example1 | customCurrency:'€'}} - Custom Symbol</li>
<li>{{example1 | customCurrency:'€':false}} - Custom Symbol and Custom Location</li>
</ul>
{{cost | currency : "€" }}