CODEWITHSUNDEEP
javascriptangularjs
Danial
Danial

Reputation: 1643

Adding other currency format to AngularJS

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>

Upvotes: 2

Views: 848

Answers (5)

Sean Larkin
Sean Larkin

Reputation: 6430

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)

Upvotes: 2

Felipe Alarcon
Felipe Alarcon

Reputation: 956

// 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>

Upvotes: 1

Harris
Harris

Reputation: 1785

As described in the documentation, simply add the currency symbol you want after the filter.

<p> {{ cost | currency : '€' }} </p>

Upvotes: 1

GPicazo
GPicazo

Reputation: 6676

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

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

You can pass in html entities after currency:. Here are a couple examples.

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

From the documentation, the format for this filter is

{{ currency_expression | currency : symbol : fractionSize}}

Upvotes: 1

Related Questions