Angular

The DiagramView Angular component (diagram-view selector) allows integrating the MindFusion.Diagramming API into Angular applications. It renders a Diagram instance assigned to "diagram" property as its model.

At this time the following properties can be set from HTML templates too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid, zoomFactor. All diagram events can be handled through event binding syntax as well:

app.module.ts

import { DiagrammingAngularModule } from '@mindfusion/diagramming-angular';

app.component.html

<diagram-view
    id='diagram'
    [behavior]="behavior"
    [diagram]="diagram" 
    [allowInplaceEdit]="true" 
    [routeLinks]="true" 
    [showGrid]="true"
    [backBrush]="'lightcyan'"
    (nodeCreated)="onNodeCreated($event)"
    (nodeDeleted)="onNodeDeleted($event)"
    (linkCreated)="onLinkCreated($event)"
    (linkDeleted)="onLinkDeleted($event)">
</diagram-view>

app.component.ts

import * as Diagramming from '@mindfusion/diagramming';
...
// declare properties
autoResize = Diagramming.AutoResize.None;
behavior = Diagramming.Behavior.DrawShapes;
diagram : Diagramming.Diagram;
...
// instantiate a Diagram model
this.diagram = new Diagramming.Diagram();

DiagramView can be installed from the @mindfusion/diagramming-angular package on npm:

npm i @mindfusion/diagramming-angular

Several Angular examples are included in JsDiagram's distribution. In order to run them, execute the following npm commands from command line in Samples/Angular folder:

npm install
npm start