angular-currency-format

Angular Currency Format

This project is module for AngularJS. It provides:

• A service (factory) that retrieves currency information (name, symbol, fraction and formating) according to ISO 4217 currency codes
• A filter to print formatted currency (-100 USD -> -$100.00)

Installation

This library is available with the bower package manager, you can either:

• Execute the following command: bower install angular-currency-format

• Add 'currencyFormat' to your angular.module dependency, usually in app.js

angular.module('myApp', ['currencyFormat']);

Demo

https://livedemo.xsolla.com/angular-currency-format/

Usage

Factory

In the factory there are two methods that return information about the currencies.

// Declare the factory as dependency
angular.module('myApp')
  .controller('MyCtrl', function (currencyFormatService) {
    // Get the information about the currencies
    console.log(currencyFormatService.getCurrencies());
    // outputs:
    // {
    //    'AMD': {
    //          'name': 'Armenian Dram',
    //          'fractionSize': 2,
    //          'symbol': {
    //              'grapheme': 'դր.',
    //              'template': '1 $',
    //              'rtl': false
    //          },
    //          'uniqSymbol': {
    //              'grapheme': 'դր.',
    //              'template': '1 $',
    //              'rtl': false
    //          }
    //    },
    //    ...
    // }

    // Get the information about currency by ISO 4217 currency code
    console.log(currencyFormatService.getByCode('EUR'));
    // outputs:
    // {
    //    'name': 'Euro',
    //    'fractionSize': 2,
    //    'symbol': {
    //        'grapheme': '€',
    //        'template': '$1',
    //        'rtl': false
    //    },
    //    'uniqSymbol': {
    //        'grapheme': '€',
    //        'template': '$1',
    //        'rtl': false
    //    }
    // }
    
    // Get the information about the delimiters
    console.log(currencyFormatService.getLanguages());
    // outputs:
    // {
    //    'ar_AE': {
    //        'decimal': '.',
    //        'thousands': ','
    //    },
    //    ...
    // }

    // Get the information about the delimiters by locale ID
    console.log(currencyFormatService.getLanguageByCode('en_US'));
    // outputs:
    // {
    // {
    //    'en_US': {
    //        'decimal': '.',
    //        'thousands': ','
    //    }
    // }
  });

Information about currencies is an object which has the structure:

{
  'AMD': {                          // ISO 4217 currency code.
     'name': 'Armenian Dram',       // Currency name.
     'fractionSize': 2,             // Fraction size, a number of decimal places.
     'symbol': {                    // Currency symbol information.
         'grapheme': 'դր.',         // Currency symbol.
         'template': '1 $',         // Template showing where the currency symbol should be located
                                    // (before or after amount).
         'rtl': false               // Writing direction.
     },
     'uniqSymbol': {                // Alternative currency symbol information. We recommend to use it
                                    // when you want to exclude a repetition of symbols in different
                                    // currencies.
         'grapheme': 'դր.',         // Alternative currency symbol.
         'template': '1 $',         // Template showing where the alternative currency symbol should be
                                    // located (before or after amount).
         'rtl': false               // Writing direction.
     }
  },
  ...
}

Symbol/uniqSymbol field is null, when the currency has no symbol/alternative symbol.

Information about languages is an object which has the structure:

{
    "en_US": {                      // Locale ID
        "decimal": ".",             // Decimal delimiter
        "thousands": ","            // Thousands delimiter
    },
    ...
}

Filter

Instead of directly using the currency symbol, you only need the 3 char long currency code (e.g. USD or JPY). It will take the right symbol, format and fraction size. The fraction can be set up by providing a number of decimal places after the currency field:

// in controller
$scope.amount = -1234.56;
$scope.isoCode = 'USD';
$rootScope.currencyLanguage = 'en_US'; // Can be set through the parameter of the filter. Default 'en_US'.    

// in template
{{ amount | currencyFormat:isoCode }} // -$1,234.56
{{ amount | currencyFormat:isoCode:0 }} // -$1,235
{{ amount | currencyFormat:'RUR':null:true:'ru_RU' }} // -1 234,56 ₽

If there is no currency symbol, then the filter will return the value in the following format: formated amount + ISO code. For example -1,234.56 USD.

Currency reference

The component uses the JSON with currencies and languages information from https://github.com/xsolla/currency-format.

The list of currency codes was taken from https://en.wikipedia.org/wiki/ISO_4217.

License

The MIT License.

See LICENSE

Changelog

1.0.6 - 2017-02-14

• [feature] Add parameter localeId to filter currencyFormat.

• [fix] Fix retrieve the default value in currencyFormatService.getLanguageByCode.