Angular Locale Settings

Home / Angular Locale Settings

With a current application project in which I’m using Angular’s built-in currency filter, the value, when negative, was properly enclosed in parenthesis.

However, an Angular update (to v1.5) changed this behavior.


Fortunately, Angular is not only open open source, but it provides lots of hooks to be able to make modifications to its behavior at run-time. I’m not quite sure why the parenthetic behavior, which is typical for accounting scenarios, was changed in Angular 1.5, but it is easy to customize to your own needs.

To modify the $locale settings, which impact the currency filter, we can use the $provide and $delegate services when a module is loaded. Accessing the .config() method is all we need.

Here’s a bit of sample code that shows how to modify the currency behavior. You can see that I’m setting the prefix and suffix the way I expected it to behave.

var myModule = angular
    .module('myModule',
    [
	    'myApp.controllers'
    ])
    .config(['$provide', function ($provide) {
	    $provide.decorator('$locale', ['$delegate', function ($delegate) {
	        if ($delegate.id == 'en-us') {
	            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '(\u00a4';
	            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = ')';
	        }
	        return $delegate;
	    }]);
    }]);

A nice side effect of this is that the setting becomes centralized and the code only runs once.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.