Client-Side Configuration (Angular)

• Apr 01, 2019
• 3 minutes to read

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.

Tip

Get Started: Build Web Dashboard Applications

• Prerequisites
• Install Dashboard Package
• Map Modules
• Create New Dashboard Component
• Configure Component Template
• Configure Component Class
• Add Global Styles
• Support Culture-Specific Data
• Register Application Component
• Run the Application

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.

Install Dashboard Package

Install a dashboard package:

npm install devexpress-dashboard --save

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

Map Modules

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

{ 
  "compilerOptions": { 
// ... 
    "paths": { 
        "jszip": [  
        "node_modules/jszip/dist/jszip.min.js"  
      ],  
      "globalize": [  
        "node_modules/globalize/dist/globalize"  
      ],  
      "globalize/*": [  
        "node_modules/globalize/dist/globalize/*"    
      ], 
      "cldr": [  
        "node_modules/cldrjs/dist/cldr"     
      ], 
      "cldr/*": [  
        "node_modules/cldrjs/dist/cldr/*"  
      ] 
    }   
  } 
} 

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

import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';  
import { DashboardControl, ResourceManager, DashboardPanelExtension } 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 the URL where the Web Dashboard's server side is hosted.         
      endpoint: "{baseURL}/api/dashboard",
      workingMode: "Designer",
    });   

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

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

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:

import Globalize from 'globalize'
declare var require: (e) => any;

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

@Component({
  // ...
})

export class DashboardComponent implements AfterViewInit, OnDestroy {
  private dashboardControl: DashboardControl; 
  constructor(private element: ElementRef) { 
    this.initGlobalize();
    ResourceManager.embedBundledResources();
  }
  initGlobalize() {
    Globalize.load(
      require('devextreme-cldr-data/en.json'),
      require('devextreme-cldr-data/supplemental.json')
    );
    Globalize.locale('en');
  }
  ngAfterViewInit(): void {
    // ...
  }
  ngOnDestroy(): void {
    // ...
  }    
}

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

initGlobalize() {
  Globalize.load(
    require('devextreme-cldr-data/en.json'),
    require('devextreme-cldr-data/de.json'),
    require('devextreme-cldr-data/supplemental.json')
  );
  Globalize.locale('de');
}

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