AngularJS $locale service
Last Updated :
31 Jan, 2023
The AngularJS $locale service is a built-in service that provides localization information for the current browser environment. It is designed to help developers create applications that can be easily adapted to different locales and languages. The $locale service exposes a number of properties that can be used to format dates, numbers, and currencies according to the conventions of the current locale. For example, the DATETIME_FORMATS property provides access to various formats for dates, times, and dates and times, such as the fullDate, longDate, medium, short, and mediumTime formats. The $locale service also provides access to the NUMBER_FORMATS property, which contains formats for numbers, such as the decimal, percent, and currency formats.
In addition to formatting, the $locale service can be used to determine the rules for parsing and validating dates, numbers, and currencies. For instance, the parseDate function can be used to parse a string into a Date object, and the isDate() function can be used to determine if a value is a valid date.
Syntax:
angular.module('myApp', ['ngLocale'])
.controller('MyController', ['$locale', function($locale) {
// Use the $locale service here
}]);
Parameter: The AngularJS $locale service does not take any parameters.
It is a simple service that exposes a number of properties and functions that provide localization information and formatting functions for the current browser environment. Here is a list of some of the properties and functions provided by the $locale service:
- DATETIME_FORMATS: an object containing various formats for dates, times, and dates and times, such as the fullDate, longDate, medium, short, and mediumTime formats.
- NUMBER_FORMATS: an object containing formats for numbers, such as the decimal, percent, and currency formats.
- parseDate(string): a function that parses a string into a Date object.
- isDate(value): a function that determines if a value is a valid date.
- parseNumber(string): a function that parses a string into a number.
- isNumber(value): a function that determines if a value is a valid number.
Approach 1: In this approach, the $locale service is injected into the controller and used to retrieve the shortDate and currency formats for the vm.date and vm.number variables, respectively. The formatted values are then displayed in the HTML template using expressions such as {{ vm.date | date:vm.dateFormat }} and {{ vm.number | number:vm.numberFormat }}.
Example 1: This example will display the current date and a number in the short date and currency formats, respectively, as defined by the conventions of the current locale.
HTML
<!doctype html>
<html ng-app="myApp">
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: green
}
</style>
<script src=
</script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$locale', function ($locale) {
var vm = this;
vm.date = new Date();
vm.number = 12345.678;
vm.dateFormat = $locale.DATETIME_FORMATS.shortDate;
vm.numberFormat = $locale.NUMBER_FORMATS.currency;
}]);
</script>
</head>
<body ng-controller="MyController as vm">
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>AngularJS $locale service</h3>
<div>
Current date: {{ vm.date | date:vm.dateFormat }}
</div>
<div>
Example number: {{ vm.number | number:vm.numberFormat }}
</div>
</div>
</body>
</html>
|
Output:
Approach 2: In this approach, we define an AngularJS app and controller that uses the $locale service to format a currency and display it in different locales. The $locale service is injected into the controller, and we use it to access the currency format patterns for the current locale. We create a scope variable currencyFormat to hold the format patterns for currency, including the symbol, number of fractional digits, and separators. We also created a localeId variable to hold the current locale and a changeLocale function which updates the currencyFormat based on the selected locale.
Example 2: This is another example that illustrates the AngularJS $locale service.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 130px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
select {
display: block;
width: 200px;
padding: 5px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
</style>
<script src=
</script>
<script>
var app = angular.module("myApp", ['ngLocale']);
app.controller("MyController", function($scope, $locale) {
$scope.currency = 12345.6789;
$scope.localeId = 'en-us';
$scope.currencyFormat = {
symbol: '$',
fraction: 3,
symbolOnLeft: true,
spaceBetweenAmountAndSymbol: true,
decimal: $locale.NUMBER_FORMATS.DECIMAL_SEP,
thousands: $locale.NUMBER_FORMATS.GROUP_SEP
};
$scope.changeLocale = function(){
$locale.id = $scope.localeId;
$scope.currencyFormat.decimal =
$locale.NUMBER_FORMATS.DECIMAL_SEP;
$scope.currencyFormat.thousands =
$locale.NUMBER_FORMATS.GROUP_SEP;
if($scope.localeId === 'fr-fr'){
$scope.currencyFormat.symbol = '€';
}else if($scope.localeId === 'de-de'){
$scope.currencyFormat.symbol = '€';
}else{
$scope.currencyFormat.symbol = '$';
}
}
});
</script>
</head>
<body ng-controller="MyController">
<center>
<h1> GeeksforGeeks</h1>
<h3> AngularJS $locale service</h3>
<label>Change Locale:</label>
<select ng-model="localeId"
ng-change="changeLocale()">
<option value="en-us">
English (United States)
</option>
<option value="fr-fr">
French (France)
</option>
<option value="de-de">
German (Germany)
</option>
</select>
<br>
<label>Currency:</label>
<span>
{{currency | currency:currencyFormat.symbol:currencyFormat.fraction:currencyFormat.symbolOnLeft:currencyFormat.spaceBetweenAmountAndSymbol:currencyFormat.decimal:currencyFormat.thousands}}
</span>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...