Create an Angular Dashboard Application

  • 4 minutes to read
IMPORTANT

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

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.

The tutorial uses a modular approach (Angular) to create and configure a client part of the Web Dashboard application and a server based on an ASP.NET Core application.

Run Demo View Example

Prerequisites

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

Step 1. Configure the Client Dashboard Control in the Angular Project

  1. Create a new angular application.

    ng new dashboard-app
    

    Navigate to the created folder after the project is created:

    cd dashboard-app
    
  2. 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 the installation is completed.

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

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
    
    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        BrowserModule,
        DxDashboardControlModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  4. Open the app.component.html file and replace its content with the following 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>
    
  5. Go to the project’s src folder and open the styles.css file. Add the following global styles:

    @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");
    
  6. Use the command below to launch the application.

    npm start
    

    Open http://localhost:4200/ in your browser to see the result. The application displays data from the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

Step 2. Create a Server Application

Create a custom server application to show your data. Follow the steps below:

  1. Create the ASP.NET Core Dashboard Application with one of the following methods to use it as the server for the Angular application:
  1. Enable cross-origin resource sharing (CORS) to configure corresponding permissions to access resources from the server. Use the AllowAnyOrigin method to allow CORS requests from all origins.

    public void ConfigureServices(IServiceCollection services) {
      services
        .AddCors(options => {
          options.AddPolicy("AllowAnyOrigin", builder => {
              builder.AllowAnyOrigin();
              builder.AllowAnyMethod();
              builder.WithHeaders("Content-Type");
          });
        });
        // ...
    }
    
    public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
        // ...
        app.UseCors("AllowAnyOrigin");
        app.UseMvc(routes => { ... }  
    }
    
    NOTE

    To prohibit any client from getting access to your server with personal info, specify the client application's URL directly. Use the WithOrigins method to set it up.

  2. Open the Startup.cs file and set a route prefix in the MapDashboardRoute method. In this tutorial, it is api/dashboard:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
        // ...
        app.UseCors("AllowAnyOrigin");
        app.UseMvc(routes => {
            routes.MapDashboardRoute("api/dashboard");
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
    
  3. Launch the server.

  4. In the client application, go to the app.component.html file and change the endpoint property. Its value should consist of a base URL where the Web Dashboard's server is hosted and the route prefix from step 3.

    <dx-dashboard-control 
      style="display: block;width:100%;height:800px;"
      endpoint='{baseURL}/api/dashboard'
    >
    </dx-dashboard-control>
    

Step 3. Switch to Viewer Mode

Once you create and save a dashboard, you can switch your Dashboard Designer to Viewer mode.

  1. Open the app.component.html file and set the workingMode property to ViewerOnly:

    <dx-dashboard-control 
      style="display: block;width:100%;height:800px;"
      endpoint='{baseURL}/api/dashboard'
      workingMode='ViewerOnly'
    >
    </dx-dashboard-control>
    
  2. Run the application. The HTML JavaScript Dashboard displays the dashboard stored on the server.

Next Steps

See Also