angular-numbro

    1.5.3 • Public • Published

    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
      

    Keywords

    none

    Install

    npm i angular-numbro

    DownloadsWeekly Downloads

    10

    Version

    1.5.3

    License

    none

    Last publish

    Collaborators

    • robertbaker