Dashboard for Angular - Localization

The example shows how to localize the Dashboard component in an Angular application:

• 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.

Example Structure

The example has the following structure:

• The asp-net-core-server folder contains the backend project built with ASP.NET Core 3.1.
• The dashboard-angular-app folder contains the client application built with Angular.

Client Localization

Files to review:

• app.component.ts

The dashboard-angular-app project shows how to localize a client application with the component-specific JSON files for the German market (the de culture). Intl is used to format dates, numbers, and currencies.

Server Localization

Files to review:

• Startup.cs

Since the Web Dashboard exports data on the server side, you need to localize the server to complete the localization process. The asp-net-core-server project contains satellite resource assemblies for the German culture.

Quick Start

In the asp-net-core-server folder run the following command:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44337/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

In the dashboard-angular-app folder, run the following commands:

npm install
npm start

Open http://localhost:4200/ in your browser to see the result.

Documentation

• Localize Dashboard Component for Angular
• Install DevExpress Controls Using NuGet Packages

More Examples

• Dashboard for React - Localization

• Dashboard for Vue - Localization

• Dashboard Control for JavaScript Applications - Localization

• ASP.NET Core Dashboard Control - Localization

• ASP.NET MVC Dashboard Extension- Localization

• ASP.NET Web Forms Dashboard Control - Localization

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)