How to translate devextreme filter buttons text

Question

As i mentioned in the title how can i translate filter buttons text to other language ?

Answer 1

You can achieve this using localization, to do so you need to import:

import 'devextreme-intl';
import { locale } from "devextreme/localization";

and then add the below line in your AppComponent:

export class AppComponent {
    constructor() {
        locale(navigator.language || 'en'); // Set "en" as our default locale. OR set the appropriate value to whichever language you wish to translate to
    }
}

OR

You could also achieve the same with the Globalize package. Activating Globalize in your project requires the following files:

1. Globalize library
2. CLDR library
3. CLDR JSON files for each required language.

You can find the Globalize and CLDR libraries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js directory.

Install the cldr-data and globalize packages:

npm install --save-dev cldr-data globalize

Globalize internationalization and localization library leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. It provides number formatting and parsing, date and time formatting and parsing, currency formatting, and message formatting. To achieve localization with the help globalize library you need to take the below steps:

import Globalize from 'globalize'; 

and then add the below line in your AppComponent:

export class AppComponent {
    constructor() {
        Globalize.locale(navigator.language || 'en'); // Set "en" as our default locale. OR set the appropriate value to whichever language you wish to translate to
    }
}