Angular Localization - Using Globalize

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxSelectBoxModule, DxDataGridModule } from 'devextreme-angular'; import 'devextreme/common/core/localization/globalize/number'; import 'devextreme/common/core/localization/globalize/date'; import 'devextreme/common/core/localization/globalize/currency'; import 'devextreme/common/core/localization/globalize/message'; // import 'devextreme-angular/common/core/localization'; import deMessages from 'devextreme/localization/messages/de.json'; import ruMessages from 'devextreme/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; import Globalize from 'globalize'; import { Locale, Payment, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxSelectBoxModule, DxDataGridModule, ], }) export class AppComponent { locale: string; locales: Locale[]; payments: Payment[]; formatMessage = Globalize.formatMessage.bind(Globalize); constructor(private service: Service) { this.locale = this.getLocale(); this.payments = service.getPayments(); this.locales = service.getLocales(); this.initGlobalize(); Globalize.locale(this.locale); } initGlobalize() { Globalize.load( deCldrData, ruCldrData, supplementalCldrData, ); Globalize.loadMessages(deMessages); Globalize.loadMessages(ruMessages); Globalize.loadMessages(this.service.getDictionary()); } changeLocale(data) { this.setLocale(data.value); parent.document.location.reload(); } getLocale() { const locale = sessionStorage.getItem('locale'); return locale != null ? locale : 'en'; } setLocale(locale) { sessionStorage.setItem('locale', locale); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } ::ng-deep .option > label { margin-right: 10px; } ::ng-deep .option > .dx-selectbox { display: inline-block; vertical-align: middle; }

import { Injectable } from '@angular/core'; export class Locale { Name: string; Value: string; } const locales: Locale[] = [{ Name: 'English', Value: 'en', }, { Name: 'Deutsch', Value: 'de', }, { Name: 'Русский', Value: 'ru', }]; export class Payment { PaymentId: number; ContactName: string; CompanyName: string; Amount: number; PaymentDate: string; } const payments: Payment[] = [{ PaymentId: 1, ContactName: 'Nancy Davolio', CompanyName: 'Premier Buy', Amount: 1740, PaymentDate: '2013/01/06', }, { PaymentId: 2, ContactName: 'Andrew Fuller', CompanyName: 'ElectrixMax', Amount: 850, PaymentDate: '2013/01/13', }, { PaymentId: 3, ContactName: 'Janet Leverling', CompanyName: 'Video Emporium', Amount: 2235, PaymentDate: '2013/01/07', }, { PaymentId: 4, ContactName: 'Margaret Peacock', CompanyName: 'Screen Shop', Amount: 1965, PaymentDate: '2013/01/03', }, { PaymentId: 5, ContactName: 'Steven Buchanan', CompanyName: 'Braeburn', Amount: 880, PaymentDate: '2013/01/10', }, { PaymentId: 6, ContactName: 'Michael Suyama', CompanyName: 'PriceCo', Amount: 5260, PaymentDate: '2013/01/17', }, { PaymentId: 7, ContactName: 'Robert King', CompanyName: 'Ultimate Gadget', Amount: 2790, PaymentDate: '2013/01/21', }, { PaymentId: 8, ContactName: 'Laura Callahan', CompanyName: 'EZ Stop', Amount: 3140, PaymentDate: '2013/01/01', }, { PaymentId: 9, ContactName: 'Anne Dodsworth', CompanyName: 'Clicker', Amount: 6175, PaymentDate: '2013/01/24', }, { PaymentId: 10, ContactName: 'Clark Morgan', CompanyName: 'Store of America', Amount: 4575, PaymentDate: '2013/01/11', }]; export class PaymentView { Number: string; Contact: string; Company: string; Amount: string; PaymentDate: string; } export class Dictionary { [key: string]: PaymentView; } const dictionary: Dictionary = { en: { Number: 'Number', Contact: 'Contact', Company: 'Company', Amount: 'Amount', PaymentDate: 'Payment Date', }, de: { Number: 'Nummer', Contact: 'Ansprechpartner', Company: 'Firma', Amount: 'Betrag', PaymentDate: 'Zahlungsdatum', }, ru: { Number: 'Номер', Contact: 'Имя', Company: 'Организация', Amount: 'Сумма', PaymentDate: 'Дата оплаты', }, }; @Injectable() export class Service { getPayments() { return payments; } getLocales() { return locales; } getDictionary() { return dictionary; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>