Devextreme-angular: Localization of date boxes

[Cito]

How can you make the date boxes appear with dates in German format, and have texts like "page" on the paginator translated to German language?

Tried the following, but it didn't work:

import { locale } from 'devextreme/localization';
locale('de'); // in the constructor of the main app component

I can't find any information on localization in the docs for the Angular integration of DexExtreme.

[GoshaFighten]

You also need to include either Globalize or Intl. See the Localization help topic that describes this. Check out the webpack-angular-globalize and intl-angular examples that illustrate how to include these libraries in Angular.

[GoshaFighten]

This issue is closed because of being inactive. If you need further assistance, leave a comment here.

[Cito]

Thanks again for the helpful advice. I found the Localizaton help topic, but not the int-angular example. The problem is that both use the require() mechanism to load the localized messages, which is alien to TypeScript/Angular and does not work out of the box. You need to install the node typings and add them to the compilerOptions for this to work. This crucial information is missing in the int-angular readme text.

I found a better solution that uses the import statement instead of require(), which is more idiomatic for a TypeScript/Angular app. For this to work, you only need to add the following to the typings.d.ts file:

declare module '*.json' {
    const value: any;
    export default value;
}

Then the German localization can be achived with import statements only. Example code that needs to be place in app.module.ts:

import 'devextreme-intl';
import { locale, loadMessages } from 'devextreme/localization';
import * as messagesDe from 'devextreme/localization/messages/de.json';
loadMessages(messagesDe);
locale(navigator.language);

Worked pretty well for me, all the date formats and labels are now in German.

[caiusCitiriga]

@GoshaFighten your solution works perfectly, I have a question though. I see that in the app.module.ts you import the DevExtremeModule from 'devextreme-angular'. This thing seems huge. If I skip that import the whole thing works, but it gives an error in console about a .config property of a e.DevExpress object. I guess that the DevExtreme import is needed for that reason. But still, it looks like a monolith. Am I wrong maybe?

Also, I found out that setting the locale for the first time its permanent until the next page reload. I've got a system that handles 2 languages, ITA and ENG. Switching language and calling the locale(myLocale) seems to have no effect. Any suggestion on this?

[bagratzakaryan]

@GoshaFighten Hello, I would like localize dx-date-box in Armenian language, I'm working with devextreme-intl , I added for the devextreme grid into devextreme/localization/messages but for dx-date-box I can't, could you help me how can I do it ?
stackoverflow

Thanks