Dashboard for Angular - How to display the Web Dashboard in a popup

This example illustrates how to use the Angular-based dx-dashboard-control component to diplay a dashboard in the DevExtreme Popup widget.

See the following files for implementation details:

• app.component.html
• app.component.ts

The example uses a modular approach that 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 asp-net-core-server folder contains an ASP.NET Core 3.1 Dashboard application.
• The dashboard-angular-app folder contains a client application.

Quick Start

In the asp-net-core-server folder run the following command:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44396/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). It is insecure, because any website can make cross-origin requests to the app. We recommend you specify the client application's URL directly to prohibit clients from getting access to your personal information on your server. Learn more: Cross-Origin Resource Sharing (CORS)

In the dashboard-angular-app folder, run the following commands:

npm start

Open http://localhost:4200/ in your browser to see the result.

Documentation

• Add Web Dashboard to an Angular CLI Application
• Dashboard Component for Angular
• Cross-Origin Resource Sharing (CORS)
• Install DevExpress Controls Using NuGet Packages

Examples

• Get Started - Client-Side Dashboard Application built with Angular
• Dashboard Component for Angular - Configuration
• Dashboard Component for React - How to display the Web Dashboard in a popup

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)