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  Copy Code
import { DiagrammingAngularModule } from '@mindfusion/diagramming-angular';

app.component.html  Copy Code
<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  Copy Code
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