Creating Dynamic Mind Maps with Angular Diagram Components

Mind maps are powerful tools for brainstorming, organizing thoughts, and visualizing complex ideas. With Angular, a popular web development framework, you can create dynamic and interactive mind maps using diagram components. In this blog post, we’ll explore how to build a mind map application using Angular and provide examples to get you started.

If you want to learn one more angular feature, you can refer here.

Prerequisites

Before we dive into creating a mind map application, make sure we have the following prerequisites:

1. Node.js and npm: Ensure we have Node.js and npm (Node Package Manager) installed on your system. You can download them from nodejs.org.
2. Angular CLI: Install the Angular CLI globally by running the following command:

npm install -g @angular/cli

Setting Up the Angular Project

Let’s create a new Angular project for our mind map application:

ng new mind-map-app

Now, navigate to the project directory:

cd mind-map-app

Installing Diagram Libraries

To create mind maps, we’ll need a diagram library. In this example, we’ll use the popular ngx-diagram library. Install it and its dependencies as follows:

npm install ngx-diagram-core ngx-diagram-theme-default

Building the Mind Map Component

Next, let’s create a mind map component where we’ll build our mind map. Generate a new component using the Angular CLI:

Now, open the mind-map.component.ts file and add the necessary imports:

import { Component } from '@angular/core';
import { DiagramItem, DiagramModel, DiagramService, ConnectorModel, ConnectorType } from 'ngx-diagram-core';

@Component({
  selector: 'app-mind-map',
  templateUrl: './mind-map.component.html',
  styleUrls: ['./mind-map.component.css'],
})
export class MindMapComponent {
  constructor(private diagramService: DiagramService) {
    this.diagramService.init();
    this.createMindMap();
  }

  createMindMap() {
    const root = new DiagramItem({ id: 'root', text: 'Root' });

    const model = new DiagramModel();
    model.addNode(root);

    this.diagramService.setModel(model);
  }
}

In the code above, we import necessary modules from ngx-diagram-core, create a root node, and initialize a diagram model.

Adding the Mind Map Component to the App

To see our mind map in action, add the MindMapComponent to the app.component.html:

<div style="text-align:center">
  <h1>
    Welcome to Mind Map App!
  </h1>
</div>
<app-mind-map></app-mind-map>

Styling the Mind Map

Create a basic CSS file mind-map.component.css to style your mind map. For example:

:host {
  display: block;
  width: 100%;
  height: 100%;
}

:host ::ng-deep .diagram-node {
  background-color: #3498db;
  color: #fff;
  border: 2px solid #2980b9;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}

:host ::ng-deep .diagram-connector {
  background-color: #34495e;
  border: 2px solid #2c3e50;
}

Running the Application

Now, we can run your Angular application using the following command:

ng serve

Visit http://localhost:4200 in your web browser to see your mind map in action.

Expanding the Mind Map

To create a fully functional mind map application, we can extend it in various ways:

1. Adding Nodes: Implement a feature to add new nodes to the mind map dynamically.
2. Connecting Nodes: Allow users to connect nodes to create relationships and hierarchies.
3. Custom Styling: Enhance the visual appeal of your mind map by customizing the styles of nodes and connectors.
4. Data Persistence: Implement data storage and retrieval to save and load mind maps.
5. Export/Import: Provide options to export and import mind maps in common formats (e.g., JSON, XML).
6. Collaboration: Enable real-time collaboration among multiple users on the same mind map.

Conclusion

Creating a mind map application using Angular and diagram components can be a valuable project to enhance your Angular skills. With the ngx-diagram library, we can easily build interactive mind maps and expand the functionality to suit your specific needs. Whether for personal organization or collaborative brainstorming, a well-designed mind map application can be a powerful tool for visualizing ideas and information.

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.