All docs
V24.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Diagram - Add the Diagram Component to an Angular CLI Application

This tutorial adds the Diagram component to an Angular CLI Application. Refer to the Angular CLI documentation for information on how to create such an application.

Install the devextreme and devextreme-angular npm packages:

`npm install devextreme@21.1.4 devextreme-angular@21.1.4 --save --save-exact`

Open the angular.json file and reference the Diagram and a predefined theme stylesheet (dx.light.css in the code below):

angular.json
"styles": [
    ...
    "node_modules/devexpress-diagram/dist/dx-diagram.min.css",
    "node_modules/devextreme/dist/css/dx.light.css"
]

Go to the NgModule and import the Diagram module.

app.module.ts
// Imports the Diagram component
import { DxDiagramModule } from 'devextreme-angular'; 

@NgModule({ 
    // ... 
    imports: [
        // ...
        DxDiagramModule
    ] 
})

Now you can use the Diagram component in your application:

app.component.html
<dx-diagram></dx-diagram>

Run the application with the following command:

`ng serve`

Open http://localhost:4200/ to browse the application.