All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Localize Dashboard Component for Angular

  • 3 minutes to read

You can localize your applications - update their UI to match certain culture and language settings:

  • Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc.
  • Format numbers, dates, and currencies according to specific culture settings.

Localize UI

To localize the user interface, add the component-specific JSON files that correspond to other cultures. For this, obtain a JSON object with strings from DevExpress Localization Service. Modules to translate:

  • Dashboard.Core
  • Dashboard.Web
  • DataAccess
  • Web.Resources

Pass the JSON object to the ResourceManager.setLocalizationMessages static method. Make sure that you apply localization before the Dashboard component is initialized and loaded.

NOTE

Since the Web Dashboard exports data on the server side, add satellite resource assemblies to your project to complete the localization process.

Refer to the following page to find all localizable strings: DashboardStringId

Localize Dates, Numbers, and Currencies

The Dashboard component for React supports both Intl and Globalize to format dates, numbers, and currencies.

Intl

The Web Dashboard uses Intl as a default way to apply culture-specific formatting. Intl is the short name used to refer to a particular ECMAScript Internationalization API object. The Web Dashboard supports this API out of the box. All you need to do is set the locale.

Globalize

Follow the instruction to import Globalize scripts: Use Globalize to Format Dates, Numbers, and Currencies.

Example

Follow the steps below to localize the Web Dashboard UI for the Spanish market (the es culture):

  1. Unpack a self-extracting archive on your Mac/Linux PC and extract json resources. Copy the dx-analytics-core.es.json and dx-dashboards.es.json files with the required locale to the application's directory (for example, to the localization folder).

  2. Import locale from the devextreme package (the localization module) and use the ResourceManager.setLocalizationMessages static method to load the localization strings. Call this method before the dashboard component is created.

  3. Call the locale method and pass the locale as a parameter to apply culture settings.

  1. Open the tsconfig.json file and set the resolveJsonModule property to true to allow the application to import and extract types from json files:

    "compilerOptions": {
        "resolveJsonModule": true, 
        //...
    }
    

The following code shows how to translate text resources at runtime. For an Angular application, the most effective place to load translated strings is the constructor of the main AppComponent class:

import { Component } from '@angular/core';
import { ResourceManager } from 'devexpress-dashboard';
import { locale } from "devextreme/localization";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    ResourceManager.setLocalizationMessages({ "DashboardStringId.ActionExportTo": "Custom Text for Export Button" });
    locale('es');
  }
}