Tuesday, June 18, 2024
Angular 8Angular 9JavascriptMxgraph

Angular 8 Mxgraph working example

Angular 8 Mxgraph working example

Hello to all, welcome to In this post, I will tell you, Angular 8 Mxgraph working example.

Angular 8 Mxgraph working example
Angular 8 Mxgraph working example

Post Working:

In this post, I am intigerating MxGraph in Angular 8.

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 8 application on your machine:

$ npm install -g @angular/cli

$ ng new angularmxgraph // Set Angular8 Application on your pc

cd angularmxgraph // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server


2. Now run below command into your terminal to include maxgraph package into your angular 8 application:

npm install --save mxgraph


3. Now add below code into your angular.json file:

"styles": [


4. Add, below code into your app.component.ts file:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
declare var mxGraph: any;
declare var mxHierarchicalLayout: any;
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent implements AfterViewInit {

  @ViewChild('graphContainer') graphContainer: ElementRef;

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

    try {
      const parent = graph.getDefaultParent();

      const vertex1 = graph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = graph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);

      graph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      new mxHierarchicalLayout(graph).execute(graph.getDefaultParent());



5. Finally add below code into app.component.html file:

<div #graphContainer id="graphContainer"></div>


This is it and if you have any kind of query then please let me know.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.