DevExtreme Angular - Localization
Localization adapts your application to linguistic and regional differences. DevExtreme allows you to localize:
- Messages (using dictionaries)
- Numbers, dates, and currencies (using Intl or Globalize).
DevExtreme also supports right-to-left layout.
Dictionaries
Dictionaries contain localized strings for different languages. The strings are represented by key/value pairs and are shipped as JavaScript or JSON files (depending on the package you use).
DevExpress curates the following dictionaries:
- English (en) (default)
- German (de)
- Japanese (ja)
- Russian (ru)
There are also dictionaries that the community contributes and curates. The list of dictionaries is available on GitHub.
You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on CDN or npm.
CDN or local file
Link the required dictionaries using the
<script>
tag. Place the links after a link to the DevExtreme library:npm
Include the dictionaries using the
import
orrequire
statement—the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes:
Create a New Dictionary
To make a dictionary for a new locale:
- Copy one of the available dictionaries.
- Rename it according to the new locale.
- Translate the strings in it and change the locale key.
You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content.
Add Strings to a Dictionary
In the following example, the loadMessages(messages) method adds a string with the greetingMessage
key to the English and German dictionaries. The formatMessage(key, value) method then uses this key to retrieve the string from the dictionary that corresponds to the locale set by the locale(locale) method.
- import { Component } from '@angular/core';
- import { formatMessage, loadMessages, locale } from 'devextreme/localization';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor() {
- loadMessages({
- 'en': {
- 'greetingMessage': 'Good morning, {0}!'
- },
- 'de': {
- 'greetingMessage': 'Guten morgen, {0}!'
- }
- });
- locale(navigator.language);
- }
- userName: string = 'John';
- get greeting() {
- return formatMessage('greetingMessage', this.userName);
- }
- }
- <h1>{{ greeting }}</h1>
Override Strings in a Dictionary
To override a string, find its key in any dictionary and use it to specify the new string value.
In the following code, we override two strings from the English dictionary:
- import { Component } from '@angular/core';
- import { loadMessages } from 'devextreme/localization';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor() {
- loadMessages({
- "en": {
- "dxDataGrid-editingDeleteRow": "Remove",
- "dxDataGrid-editingUndeleteRow": "Recover"
- }
- });
- }
- }
Using Intl
Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API out of the box. All you need to do is set the locale:
- import { Component } from '@angular/core';
- // Dictionaries for German and Russian languages
- import deMessages from "devextreme/localization/messages/de.json";
- import ruMessages from "devextreme/localization/messages/ru.json";
- import { locale, loadMessages } from "devextreme/localization";
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor() {
- loadMessages(deMessages);
- loadMessages(ruMessages);
- locale(navigator.language);
- }
- }
Strings, numbers, dates, and currencies are now automatically localized and formatted according to the specified locale. You can also specify a currency other than USD globally (using the defaultCurrency setting) or in format definitions:
- import { Component } from '@angular/core';
- import config from 'devextreme/core/config';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor() {
- // Specifying a currency globally
- config({ defaultCurrency: 'EUR' });
- }
- }
- <dx-data-grid ... >
- <dxi-column dataField="price">
- <!-- Specifying a currency in a format definition -->
- <dxo-format
- type="currency"
- currency="RUB">
- </dxo-format>
- </dxi-column>
- </dx-data-grid>
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxDataGridModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxDataGridModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
You can use structures compatible with the Intl API for value formatting. Refer to the Intl Formats section in the Value Formatting article for more information.
Using Globalize
Activating Globalize in your project requires the following files:
- Globalize library
- CLDR library
- CLDR data
All the components are available via CDN and npm.
CDN or local files
Include the Globalize and CLDR libraries using
<script>
tags as shown below. In this example, German and Russian dictionaries are also included. Note that the order you include the libraries is important. Then, set the locale using theGlobalize.locale()
method:npm
Install the
devextreme-cldr-data
andglobalize
packages:- npm install --save-dev devextreme-cldr-data globalize
Register Globalize in your project as described in the Angular, Vue, or React articles.
Then, include Globalize, CLDR, and language-specific CLDR data using the
import
orrequire
statement—the statement depends on the syntax for working with modules. The code below shows ECMAScript 6 and CommonJS syntaxes. These examples include German and Russian dictionaries.
Strings, numbers, dates, and currencies are now automatically localized and formatted according to the specified locale. You can also use a currency other than USD (see the last example in the Using Intl topic).
In addition, you can now format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example:
- <dx-data-grid ... >
- <dxi-column
- dataField="OrderDate"
- [format]="{ skeleton: 'yMMMd' }">
- </dxi-column>
- <dxi-column
- dataField="SaleAmount"
- [format]="{ currency: 'EUR', maximumFractionDigits: 2 }">
- </dxi-column>
- </dx-data-grid>
- import { Component } from '@angular/core';
- // ...
- // import dictionaries and localization modules here
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- // ...
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxDataGridModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxDataGridModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
See Also
Localize Custom Values
DevExtreme provides an API for localizing messages, dates, and numbers in your app.
To localize a message, add it to a dictionary as shown in the Add Strings to a Dictionary article.
To localize a custom date or number, apply a format to it as shown in the Format Custom Values article.
Right-to-Left Support
Right-to-left (RTL) support allows the UI component to adapt its content to right-to-left locales.
RTL layout can be specified for an individual UI component using its rtlEnabled property:
- <dx-slider ...
- [rtlEnabled]="true">
- </dx-slider>
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- // ...
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxSliderModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxSliderModule
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
To apply RTL to your entire application, set the same property globally using the config() function:
- import { Component } from '@angular/core';
- import config from 'devextreme/core/config';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor() {
- config({ rtlEnabled: true });
- }
- }
See Also
- RTL Support Demo: DataGrid | Navigation Widgets | Editors
If you have technical questions, please create a support ticket in the DevExpress Support Center.