MXGRAPH

Mxgraph in Angular 10

Integration with Angular

create a Angular project.

ng new mxapp

Install mxgraph using

npm i mxgraph

in angular.json add

open app.component.ts file and create a Element Reference

@ViewChild(‘graphContainer’) graphContainer: ElementRef

open app.component.html file add

<div class=”container” #graphContainer id=”graphContainer”></div>

Declare a lifecycle property ngAfterViewInit

Inside ngAfterViewInit declare a instance for mxgraph and insert the following

insertvertex is used to create a vertex and it has default parent ,id,name,x axis,y axis,width,height and insertedge will create a connection between two vertex.The entire code look like

app.component.ts

app.component.html

Styles for edges ,vertex

Default mxgraph will create a rectangle with blue color ,you can customize by giving images , different shapes.For vertex these are the properties “shape”:”dashed=1;fillColor=none ;strokeColor=black;strokeWidth=3;align=center;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;fontSize=20",

For Edge you can build arrow like T shape,double headed arrow,can change the width of the arrow using the properties edges :”endArrow=classic;startArrow=classic;strokeColor=black; strokeWidth=3";”edgeStyle=orthogonalEdgeStyle;elbow=vertical;rounded=1;entryX=0.5; entryY=0;

Position of X ,Y axis

Default Mxgraph build a diagram from top to bottom.To change the position of X,Y declare and define the setparentposition method in try block like this.setParentPosition();Define the method outside.This method is used to set the starting position if the parent so that you can start from any x,y point.

app.component.ts

once done do ng serve and open the localhost and see the output without setting up the parentposition.