Add Web Dashboard to an Angular CLI Application

  • 3 minutes to read

This approach is based on the client-server model. You need a server (an ASP.NET Core or ASP.NET MVC backend) and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.

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 (command line interface tool) globally:

    npm install -g @angular/cli
    

    Familiarity with basic concepts and patterns of Angular is required to use this tutorial. Learn basics: angular.io

Requirements

  • The script version on the client should match with libraries version on the server up to a minor version.
  • Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

Create 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 Dashboard Package

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once. The devexpress-dashboard-angular package contains the DashboardControl component and module.

Install a dashboard package with required peerDependencies:

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

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

Import the Dashboard Module

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

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

@NgModule({
  imports: [
    // ...
      DxDashboardControlModule
  ],
  // ...
})
export class AppModule { }

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 in the styles.css file:

@import url("../node_modules/jquery-ui/themes/base/all.css");  
@import url("../node_modules/devextreme/dist/css/dx.common.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). Follow the instructions below to configure your server:

See Also