How to integrate mxGraph with Angular 4?

Question

I am working on Angular 4 and I want to integrate mxGraph in my project. I have googled for it but I am not getting the full working example.

I have tried following

Answer 1

There is a new mxgraph TypeScripts type definition package that worked far better than any of the others.

https://www.npmjs.com/package/mxgraph-type-definitions

Here are the steps I followed to get this to work for a new Angular 9 project:

Create the Angular 9 app:

ng new graphdemo

Add mxgraph:

npm install --save mxgraph

Install the mxgraph TypeScript type definitons (these worked better than any of the other type definitions I found on GitHub and NPM):

npm install --save-dev mxgraph-type-definitions

Follow instructions there to install it. I'm not sure of the best way for the Angular project to find those types. But it worked for me to add the following line to my app's src/main.ts file:

/// 

Add file src/assets/js/mxgraph.conf.js with contents:

mxBasePath = 'mxgraph';

In angular.json, I added:

"assets": [
  {"glob": "favicon.ico", "input": "/src", "output": "/" },
  {"glob": "**/*", "input": "src/assets/", "output": "/assets/" },
  {"glob": "**/*", "input": "./node_modules/mxgraph/javascript/src", "output": "/mxgraph"}
]

And:

"scripts": [
  "src/assets/js/mxgraph.conf.js",
  "node_modules/mxgraph/javascript/mxClient.js"
]

In src/app/app.component.ts:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('graphContainer') graphContainer: ElementRef;

  ngAfterViewInit(): void {
    const graph = new mxGraph(this.graphContainer.nativeElement);

    try {
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      const vertex1: mxCell = graph.insertVertex(parent, '1', 'vertex 1', 0, 0, 70, 30);
      const vertex2: mxCell = graph.insertVertex(parent, '2', 'vertext 2', 0, 0, 70, 30);
      graph.insertEdge(parent, '3', '', vertex1, vertex2);

    } finally {
      graph.getModel().endUpdate();
      new mxHierarchicalLayout(graph).execute(graph.getDefaultParent());
    }
  }
}

And, finally, in src/app/app.component.html: