Angular Diagram - Diagram Tools

The Diagram UI component allows you to customize its UI tools with the following properties.

Diagram control data toolbox

View Demo

app.component.html
app.component.ts
app.module.ts
  • <dx-diagram #diagram id="diagram" (onCustomCommand)="onCustomCommand($event)">
  • <dxo-context-menu [enabled]="true" [commands]='["bringToFront", "sendToBack", "lock", "unlock"]'>
  • </dxo-context-menu>
  • <dxo-context-toolbox [enabled]="true" category="flowchart" [width]="200" [shapeIconsPerRow]="5">
  • </dxo-context-toolbox>
  • <dxo-properties-panel visibility="visible">
  • <dxi-tab>
  • <dxi-group title="Page Properties" [commands]='["pageSize","pageOrientation","pageColor"]'></dxi-group>
  • </dxi-tab>
  • </dxo-properties-panel>
  • <dxo-history-toolbar [visible]="false">
  • </dxo-history-toolbar>
  • <dxo-view-toolbar [visible]="true">
  • <dxi-command name="zoomLevel"></dxi-command>
  • <dxi-command name="fullScreen"></dxi-command>
  • <dxi-command name="units"></dxi-command>
  • <dxi-command name="sayHello" icon="blockquote" text="Say Hello"></dxi-command>
  • <dxi-command name="export" icon="export" [items] = '["exportSvg","exportPng","exportJpg"]'></dxi-command>
  • </dxo-view-toolbar>
  • <dxo-main-toolbar [visible]="true">
  • <dxi-command name="undo"></dxi-command>
  • <dxi-command name="redo"></dxi-command>
  • <dxi-command name="separator"></dxi-command>
  • <dxi-command name="fontName"></dxi-command>
  • <dxi-command name="fontSize"></dxi-command>
  • <dxi-command name="separator"></dxi-command>
  • <dxi-command name="bold"></dxi-command>
  • <dxi-command name="italic"></dxi-command>
  • <dxi-command name="underline"></dxi-command>
  • <dxi-command name="separator"></dxi-command>
  • <dxi-command name="fontColor"></dxi-command>
  • <dxi-command name="lineColor"></dxi-command>
  • <dxi-command name="fillColor"></dxi-command>
  • <dxi-command name="separator"></dxi-command>
  • <dxi-command name="clear" icon="clearsquare" text="Clear Diagram"></dxi-command>
  • </dxo-main-toolbar>
  • <dxo-toolbox visibility="visible" [showSearch]="false" [shapeIconsPerRow]="4" [width]="220">
  • <dxi-group category="general" title="General"></dxi-group>
  • <dxi-group category="flowchart" title="Flowchart" [expanded]="true"></dxi-group>
  • </dxo-toolbox>
  • </dx-diagram>
  • import { confirm } from 'devextreme/ui/dialog';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • // ...
  • onCustomCommand(e) {
  • if(e.name === "clear") {
  • let result = confirm("Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
  • result.then(
  • function(dialogResult) {
  • if(dialogResult) {
  • e.component.import("");
  • }
  • }
  • );
  • }
  • else if (e.name == "sayHello")
  • alert("Hello!")
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxDiagramModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxDiagramModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }