an

angular-numbro

AngularJS filter for Numbro.js: number formatting as a filter

Showing:

Popularity

Downloads/wk

0

GitHub Stars

1

Maintenance

Last Commit

6yrs ago

Contributors

9

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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
    

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial