Information

It's a mindmap component for angular

angular.json

Add in angular.json :

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/material-icons/iconfont/material-icons.css",
          "node_modules/cytoscape-context-menus/cytoscape-context-menus.css",
          "node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css" ,
          "node_modules/font-awesome/css/font-awesome.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]

app.module.ts

import { MindmapModule } from 'ngx-mindmap';

imports: [
MindmapModule
],

html

<lib-mindmap (onChange)="onChange($event)" (onSubmited)="onSubmited($event)"
[data]="data" [colorBackground]="colorBackground" (onUpdate)="onUpdate($event)" (onCreate)="onCreate($event)"
(onDelete)="onDelete($event)">
  //Add html for form
</lib-mindmap>

parameters

onChange is an event who returns the serialization schema of mindmap, and the status (load, create, update)

onSubmited is an event who returns the info of form

colorBackground is an input who load background color for secondary edge

data is an imput who load the serialization schema of mindmap

onUpdate is an event who returns the id of node updated

onCreate is an event who returns the id of created

onDelete is an event who returns the id of deleted