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