angular-numbro

Angular Numbro.js filter

This is an Angular.js filter that applies Numbro.js formatting.

How to Use

1. Include Numbro.js in your project

2. Include either the minified or non-minified javascript file from the /dist/ folder:

   <script src="angular-numbro.js"></script>

3. Inject the ngNumbro filter into your app module:

   var myApp = angular.module('myApp', ['ngNumbro']);

4. Apply the filter with the desired format string:

   <p>
       {{ price | numbro:'$0,0.00' }}
   </p>

Advanced Usage

You can configure ngNumbro during Angular's configuration phase using the $numbroConfigProvider:

var app = angular.module('exampleApp', ['ngNumbro']);

app.config(['$numbroConfigProvider', function ($numbroConfigProvider) {
    // place configuration here
}]);

Numbro.js must be already loaded in the browser prior to using $numbroConfigProvider.

Named Formats

$numbroConfigProvider.setFormat(name, formatString) - defines a named format which can be used in place of the format string in the filter.

app.config(['$numbroConfigProvider', function ($numbroConfigProvider) {
    $numbroConfigProvider.setFormat('currency', '$ 0,0.00');
}]);

In markup,

<p>
    {{ price | numbro:'currency' }}
</p>

Default Format

Numbro.js defines the default format as '0,0', so this format is used if none is provided to the filter.

$numbroConfigProvider.setDefaultFormat(format) - overrides the built-in default format.

app.config(['$numbroConfigProvider', function ($numbroConfigProvider) {
        $numbroConfigProvider.setFormat('float', '0.00');
        $numbroConfigProvider.setFormat('currency-no-sign', '0,0.00');
        $numbroConfigProvider.setFormat('currency-no-cents', '$0,0');
        $numbroConfigProvider.setDefaultFormat('$0,0.00');
        $numbroConfigProvider.setDefaultCurrencyFormat('0,0[.]00');
}]);

In markup,

<p>
    {{ price | numbro }}     <!-- will produce 15.5 $ -->
</p>

Custom Languages

$numbroConfigProvider.setLanguage(langId, definition) - adds new language definitions to Numbro.js. See the available list here: languages.

app.config(['$numbroConfigProvider', function ($numbroConfigProvider) {
    var language = {
        delimiters: {
            thousands: ' ',
            decimal: ','
        },
        abbreviations: {
            thousand: 'k',
            million: 'm',
            billion: 'b',
            trillion: 't'
        },
        ordinal: function (number) {
            return '.';
        },
        currency: {
            symbol: '€'
        }
    };

    $numbroConfigProvider.setLanguage('de', language);
}]);

Languages can be loaded directly into Numbro.js as well, e.g. by loading the language files after Numbro.js is loaded. Angular-numbro can use these languages even if they are not set via this provider.

Select Language

$numbroConfigProvider.setCurrentLanguage(langId) - selects the current language. The language must be loaded either by $numbroConfigProvider.setLanguage() or by loading the Numbro.js language file.

app.config(['$numbroConfigProvider', function ($numbroConfigProvider) {
    $numbroConfigProvider.setCurrentLanguage('de');
}]);

Examples

Check out example/simple and example/config for reference.

Bower

This filter can be installed via Bower with the following dependency in the bower.json file.

"dependencies": {
    "angular-numbro": "^1.0"
}

Browserify

This project is published in NPM as angular-numbro.

"dependencies": {
    "angular-numbro": "^1.0"
}

The example/browserify folder has a working example with Browserify and Grunt. To build this project, install Grunt and Browserify and run the following:

cd example/browserify
npm install
grunt build

Then open example/browserify/dist/index.html in a browser.

Building

1. Install Grunt CLI and Node.js

2. Install Node packages

    npm install
   

3. Build via Grunt

    grunt build
   

   The /dist/ folder contains the regular and minified Javascript files.

4. Tests are automatically run during the build, but they can be run manually as well

    grunt test