[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Collapse]Dashboard
 [Expand]Getting Started
 [Expand]Basic Concepts and Terminology
 [Expand]Common Features
 [Collapse]Creating the Designer and Viewer Applications
  [Expand]WinForms Designer
  [Expand]WinForms Viewer
  [Collapse]Web Dashboard
    Web Dashboard Technical Overview
    Supported Browsers
    Required Client Libraries
   [Expand]ASP.NET Web Forms Dashboard Control
   [Expand]ASP.NET MVC Dashboard Extension
   [Expand]ASP.NET Core Dashboard Control
   [Collapse]HTML JavaScript Dashboard Control
     Client-Side Configuration (Angular)
     Client-Side Configuration (React)
     Client-Side Configuration (Global Namespaces)
     Server-Side Configuration (ASP.NET MVC)
     Server-Side Configuration (ASP.NET Core)
     Client-Side Customization
     Designer and Viewer Modes
     Appearance Customization
    [Expand]Extend Web Dashboard Functionality
    [Expand]Create a Custom Item
    Mobile Layout
   [Expand]Error Logging
    Security Considerations
    Microsoft Azure Specifics
   [Expand]UI Elements
  [Expand]WPF Viewer
  [Expand]Web Viewer
 [Expand]Creating Dashboards
 [Expand]Visual Studio Integration
  End-User Documentation
  Localization
 [Expand]Redistribution and Deployment
  Video Tutorials
 [Expand]Examples
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Client-Side Configuration (Angular)

This approach is based on the client-server model. This requires a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

The modular approach allows you to integrate the HTML JavaScript Dashboard control into web applications. This topic describes how to add the HTML JavaScript Dashboard control to an Angular application.

Expanded Prerequisites

  • Make sure you have Node.js and npm installed on your machine.

  • In the command prompt, install the Angular CLI (command line interface tool) globally:

    Refer to the Angular documentation for information on the application's structure and the created files' purposes.

Expanded Install Dashboard Package

Install a dashboard package:

You can find all the libraries in the node_modules folder after the installation is completed.

Expanded Map Modules

In the tsconfig.json file, add paths for the globalize and cldrjs modules.

Expanded Create New Dashboard Component

In the console window, use the ng generate component command to generate a new Dashboard component:

Expanded Configure Component Template

Replace the content of the dashboard.component.html file to specify a place for a dashboard container:

Expanded Configure Component Class

Replace the content of the dashboard.component.ts file with the code below to import the required decorators and modules and configure the Dashboard component. The DashboardControlOptions.endpoint property value consists of a URL where the Web Dashboard's server side is hosted and the route prefix from the server side.

Expanded Add Global Styles

Add the following global styles in styles.css file:

Expanded Support Culture-Specific Data

Web Dashboard uses the globalize library to display culture-specific data.

Update the code in the dashboard.component.ts file to support currency formats:

Add the required cultures and specify one of the added locales in the Globalize.locale() method to change the culture.

Expanded Register Application Component

Insert the following code at the beginning of the app.component.html file to add a component reference:

Expanded Run the Application

Run the application.

Open http://localhost:4200/ in your browser to see the result. The HTML JavaScript Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

Expanded See Also

Is this topic helpful?​​​​​​​