Angular Diagram - Diagram Tools
The Diagram UI component allows you to customize its UI tools with the following properties.
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 { }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.