Client-Side Configuration (Angular)

• Feb 12, 2020
• 3 minutes to read

This approach is based on the client-server model. You need a server (backend) project 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.

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.

Tip

Get Started: Build Web Dashboard Applications

Example: Dashboard Client-Side Application (Angular)

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
  

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

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.

Install a dashboard package with required peerDependencies:

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

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

Map Modules

In the tsconfig.json file, add a path to the jszip module.

{ 
  "compilerOptions": { 
// ... 
    "paths": { 
        "jszip": [  
        "node_modules/jszip/dist/jszip.min.js"  
      ]
    }   
  } 
} 

Create New Dashboard Component

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

ng generate component dashboard

Configure Component Template

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

<div class="dashboard-container" style="width: 100%;height: 100%;"> </div>

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:

import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
import { DashboardControl, ResourceManager } from 'devexpress-dashboard';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements AfterViewInit, OnDestroy {
  private dashboardControl!: DashboardControl;
  constructor(private element: ElementRef) {
    ResourceManager.embedBundledResources();
  }
  ngAfterViewInit(): void {
    this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), {
      // Specifies a URL of the Web Dashboard's server.
      endpoint: "https://demos.devexpress.com/services/dashboard/api",
      workingMode: "Designer",
    });

    this.dashboardControl.render();
  }
  ngOnDestroy(): void {
    this.dashboardControl && this.dashboardControl.dispose();
  }
}

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 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");  

Register Application Component

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

<app-dashboard style="display: block;width:100%;height:800px;"></app-dashboard>
<!-- ... -->

Run the Application

Run the application.

ng serve --open

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