Internationalization in Filters

AngularJS has built-in support for internationalization of numbers and dates. In this text I will take a look at how they work.

Internationalization in Filters

Some of the built-in AngularJS filters supports internationalization. For instance, the date and currency filters have built-in support for internationalization. Here is how you would normally use these filters:

{{ theDate  | date: 'fullDate' }}
{{ theValue | currency }}
{{ theValue | number }}

The date filter will format the variable theDate as a date according to the locale chosen in the web app. The same is true for the currency and number filter.

Filters are covered in more detail in the section about filtering in my views and directives tutorial: AngularJS Filtering.

The Date Filter

The date filter accepts the following values specifying how to format the date:

short
medium
fullDate
shortDate
mediumDate
longDate
shortTime
mediumTime

Here are a few date filter examples:

 {{ theDate  | date: 'shortDate' }}
 {{ theDate  | date: 'longDate'  }}

The Currency Filter

The currency filter will use the currency symbol associated with the chosen locale when formatting a number as a currency. If you need to use a different currency symbol, for instance if the users wants to see a price in a different currency, you can specify the currency symbol to the currency filter like this:

{{ theValue | currency : '$' }}
{{ theValue | currency : '£' }}
{{ theValue | currency : '€' }}

Notice how the last two examples use the HTML entities for pounds and euros.

The Number Filter

The number filter formats numbers according to the chosen locale. For instance, in English the thousand separator is . and the decimal separator is , whereas in Danish it is the opposite. Here is a number filter example:

{{ theValue | number }}

Setting the Locale

To tell AngularJS what locale (language and country) to use when writing localized output, you need to include the corresponding AngularJS locale file. Here is an example that includes the Danish locale:

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

Include this after including the AngularJS main JavaScript file, and it should work out of the box. There nothing more that needs to be done than including this file.

To find the correct locale for your country, look at code.angularjs.org, click on the version of AngularJS you are using, and then click on the i18n directory. In that directory you see a list of all the available locales. Find the one that matches the country or contries you want to support, and then download them and include them in your HTML page (or reference them directly at code.angularjs.org).

Full AngularJS Internationalization Example

Here is a full AngularJS internationalization example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>
</head>


<body ng-app="myapp">

AngularJS I18n

<div ng-controller="mycontroller">
    {{theDate  | date : "fullDate"}} <br/>
    {{theValue | currency }}
</div>



<script>
    var module  = angular.module("myapp", []);

    module.controller("mycontroller", function($scope) {

        $scope.theDate  = new Date();
        $scope.theValue = 123.45;

    });
</script>

</body>
</html>

It is this line which includes the language (locale) JavaScript file:

<script src="https://code.angularjs.org/1.2.5/i18

PRV MENU NEXT

Internationalization in Filters