Add a Web Dashboard to an Angular CLI Application

• May 29, 2024
• 3 minutes to read

This article assumes that you implement a client-server architecture. An ASP.NET Core or an ASP.NET MVC application serves as the backend (server side). The client (frontend) application includes all the necessary styles, scripts and HTML-templates. Note that client scripts, libraries on the server side, and devexpress npm packages should have matching version numbers.

This topic describes how to import the DxDashboardControlModule module into an Angular application and display Web Dashboard.

View Example

Prerequisites

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

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

  npm install -g @angular/cli
  

Tip

If you are not familiar with the basic concepts and patterns of Angular, please review the fundamentals before you continue: angular.io

Requirements

• The script version on the client should match with libraries version on the server.
• All installed DevExpress npm packages should have matching versions.

Create an Angular Application

In the command prompt, create an Angular application:

ng new dashboard-angular-app

Navigate to the created folder after the project is created:

cd dashboard-angular-app

Install the Dashboard Package

Install the following npm packages:

npm install devexpress-dashboard@24.1.7 devexpress-dashboard-angular@24.1.7 @devexpress/analytics-core@24.1.7 devextreme@24.1.7  devextreme-angular@24.1.7 --save

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peer dependencies. The peer dependencies packages should be installed manually.

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

Import the Dashboard Module

In the app.component.ts file, import the DxDashboardControlModule module.

// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';

@Component({
  // ...
  imports: [
    // ...
    DxDashboardControlModule
    ],
  // ...
})
export class AppComponent { }

Add Dashboard Component

Open the app.component.html file and add the <dx-dashboard-control> element to render the dashboard component:

<dx-dashboard-control 
  style="display: block;width:100%;height:800px;" 
  endpoint="https://demos.devexpress.com/services/dashboard/api"
>
</dx-dashboard-control>

The DashboardControlOptions.endpoint property specifies the URL used to send data requests to a server. The value should consist of a base URL where the Web Dashboard’s server side is hosted and a route prefix - a value that is set in the MVC / .NET Core MapDashboardRoute properties.

Add Global Styles

Add the following global styles to the styles.css file:

@import url("../node_modules/ace-builds/css/ace.css");  
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");  
@import url("../node_modules/ace-builds/css/theme/ambiance.css");  
@import url("../node_modules/devextreme/dist/css/dx.light.css");  
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");  
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");  
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");  
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Run the Application

Run the application.

npm start

Open http://localhost:4200/ in your browser to see the result. The Web Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api). To configure your own server, follow the instructions below:

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)