Build Multi-Parent Hierarchical Trees with Angular Diagram Library
Tags: angular, webdev, datavisualization, ui
Published: 2023-09-06 11:43:20

---
title: Build Multi-Parent Hierarchical Trees with Angular Diagram Library
published: true
date: 2023-09-05 14:36:02 UTC
tags: angular, webdev, datavisualization, ui
canonical_url: https://www.syncfusion.com/blogs/post/angular-multi-parent-hierarchical-tree-diagram.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j75x5csyulanw05lewoz.png
---
Hierarchical trees with multiple parents are also known as [directed acyclic graphs (DAGs)](https://en.wikipedia.org/wiki/Directed_acyclic_graph "Wikipedia Link: Directed acyclic graph"). They are powerful tools to represent complex relationships in various domains.

The Syncfusion [Angular Diagram Library](https://www.syncfusion.com/angular-components/angular-diagram "Angular Diagram") offers comprehensive features to create hierarchical diagrams with multiple parents. With these features and an intuitive API, you’ll be able to visualize intricate relationships with ease.

This blog is a quick guide to creating a hierarchical tree diagram with multiple parents using the Angular Diagram library.

## Create a hierarchical tree diagram with multiple parents

The Syncfusion Angular Diagram component supports visualizing hierarchical trees with multiple parents from external data sources. In addition, data in any format can be easily converted, mapped, and consumed in the Diagram by setting a few properties.

We are going to design the following hierarchical tree in this article.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Creating-a-hierarichical-tree-with-multiple-parents-using-Angular-Diagram-library.png" alt="Creating a hierarichical tree with multiple parents using Angular Diagram library" style="width:100%">

  <figcaption>Creating a hierarichical tree with multiple parents using Angular Diagram library</figcaption>

</figure>

In this image, the rectangular boxes represent the nodes, and the curved lines represent the connectors.

Follow these steps to create this diagram:

1. First, refer to the [Getting Started with Angular Diagram library documentation](https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1 "Getting started with Angular Diagram component") to see the dependent scripts and theme files required to integrate the Diagram component into an Angular app.
2. Define the tree information as a JSON array.
3. Create an instance of the Angular Diagram component.
4. Configure the data to the **dataSourceSettings** property of the created diagram instance.
5. Define the common formatting for all nodes and connectors through the  **getNodeDefaults** and  **getConnectorDefaults**  methods, respectively.
6. After configuring the data source, define the layout type as **ComplexHierarchicalTree** to automatically arrange the nodes’ positions.

The following code example includes all these steps. You can also find the same code on [StackBlitz](https://stackblitz.com/edit/angular-gima49-yna1ez "Create a hierarchical tree diagram with multiple parents StackBlitz demo").

**[HTML]**

```xml
<div class="control-section diagram-complex-hierarchical-tree">
 <div class="content-wrapper">
  <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getConnectorDefaults]="connDefaults" [getNodeDefaults]="nodeDefaults" [tool]="tool" [layout]="layout" [dataSourceSettings]="data" [snapSettings]="snapSettings" (created)="created()">
  </ejs-diagram>
 </div>
</div>

```

**[TS]**

```js
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

import {
  DiagramComponent,
  LineDistribution,
} from '@syncfusion/ej2-angular-diagrams';

import {
  NodeModel,
  ConnectorModel,
  DiagramTools,
  Diagram,
  DataBinding,
  ComplexHierarchicalTree,
  SnapConstraints,
  SnapSettingsModel,
  LayoutModel,
  LayoutOrientation,
  ConnectionPointOrigin,
} from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
import { ChangeEventArgs as CheckBoxChangeEventArgs } from '@syncfusion/ej2-buttons';
Diagram.Inject(DataBinding, ComplexHierarchicalTree, LineDistribution);

export interface DataInfo {
  [key: string]: string;
}

/**
 * Multiple parent sample.
 */
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
  @ViewChild('diagram')
  public diagram: DiagramComponent;

  public Data: any = [
    { Name: 'node11', fillColor: '#e7704c', border: '#c15433' },
    {
      Name: 'node12',
      ReportingPerson: ['node114'],
      fillColor: '#efd46e',
      border: '#d6b123',
    },
    {
      Name: 'node13',
      ReportingPerson: ['node12'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    {
      Name: 'node14',
      ReportingPerson: ['node12'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    {
      Name: 'node15',
      ReportingPerson: ['node12'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    {
      Name: 'node116',
      ReportingPerson: ['node22', 'node12'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    { Name: 'node16', ReportingPerson: [], fillColor: '#14ad85' },
    {
      Name: 'node17',
      ReportingPerson: ['node13', 'node14', 'node15'],
      fillColor: '#659be5',
      border: '#3a6eb5',
    },
    { Name: 'node18', ReportingPerson: [], fillColor: '#14ad85' },
    {
      Name: 'node19',
      ReportingPerson: ['node16', 'node17', 'node18'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    {
      Name: 'node110',
      ReportingPerson: ['node16', 'node17', 'node18'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    {
      Name: 'node111',
      ReportingPerson: ['node16', 'node17', 'node18', 'node116'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    { Name: 'node21', fillColor: '#e7704c', border: '#c15433' },
    {
      Name: 'node22',
      ReportingPerson: ['node114'],
      fillColor: '#efd46e',
      border: '#d6b123',
    },
    {
      Name: 'node23',
      ReportingPerson: ['node22'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    {
      Name: 'node24',
      ReportingPerson: ['node22'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    {
      Name: 'node25',
      ReportingPerson: ['node22'],
      fillColor: '#58b087',
      border: '#16955e',
    },
    { Name: 'node26', ReportingPerson: [], fillColor: '#14ad85' },
    {
      Name: 'node27',
      ReportingPerson: ['node23', 'node24', 'node25'],
      fillColor: '#659be5',
      border: '#3a6eb5',
    },
    { Name: 'node28', ReportingPerson: [], fillColor: '#14ad85' },
    {
      Name: 'node29',
      ReportingPerson: ['node26', 'node27', 'node28', 'node116'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    {
      Name: 'node210',
      ReportingPerson: ['node26', 'node27', 'node28'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    {
      Name: 'node211',
      ReportingPerson: ['node26', 'node27', 'node28'],
      fillColor: '#8dbe6c',
      border: '#489911',
    },
    { Name: 'node31', fillColor: '#e7704c', border: '#c15433' },
    {
      Name: 'node114',
      ReportingPerson: ['node11', 'node21', 'node31'],
      fillColor: '#f3904a',
      border: '#d3722e',
    },
  ];

  public nodeDefaults(obj: NodeModel): NodeModel {
    obj.width = 40;
    obj.height = 40;
    //Initialize shape.
    obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 7 };
    return obj;
  }
  

  public data: Object = {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataSource: new DataManager(this.Data),
    //Binds the external data with the node.
    doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
      /* tslint:disable:no-string-literal */
      nodeModel.style = {
        fill: data['fillColor'],
        strokeWidth: 1,
        strokeColor: data['border'],
      };
    },
  };
  

  public created(): void {
    this.diagram.fitToPage();
  }
  

  public connDefaults(connector: ConnectorModel): void {
    connector.type = 'Orthogonal';
    connector.cornerRadius = 7;
    connector.targetDecorator.height = 7;
    connector.targetDecorator.width = 7;
    connector.style.strokeColor = '#6d6d6d';
  }

  public tool: DiagramTools = DiagramTools.ZoomPan;

  public snapSettings: SnapSettingsModel = {
    constraints: SnapConstraints.None,
  };

  public layout: LayoutModel = {
    type: 'ComplexHierarchicalTree',
    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
    horizontalSpacing: 40,
    verticalSpacing: 40,
    orientation: 'TopToBottom',
    margin: { left: 10, right: 0, top: 50, bottom: 0 },
  };
}
```

## Expand and collapse children

You can use the **expandIcon** and **collapseIcon** properties of nodes to implement the expand and collapse features in the hierarchical tree’s children nodes.

Refer to the following code example and find the same on [StackBlitz](https://stackblitz.com/edit/angular-gima49-5wypgn "Expanding and collapsing children nodes in Angular hierarchical tree StackBlitz demo").

```js
private getNodeDefaults(obj: NodeModel): NodeModel {
    ........ 
    obj.expandIcon = {
      shape: 'Minus',
    };
    obj.collapseIcon = {
      shape: 'Plus',
    };
    ........ 
    return obj;
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Expanding-and-collapsing-nodes-in-a-hierarchical-tree-with-multiple-parents-using-the-Angular-Diagram-component.gif" alt="Expanding and collapsing nodes in a hierarchical tree with multiple parents using the Angular Diagram component" style="width:100%">

  <figcaption>Expanding and collapsing nodes in a hierarchical tree with multiple parents using the Angular Diagram component</figcaption>

</figure>

## Drag and drop

You can easily change the multiparent tree layout by dragging a topic or subtopic and dropping it at the required location.

Add the following code to the Diagram control’s **drop** method to enable editing in the hierarchical tree structure. The same code is also available on [StackBlitz](https://stackblitz.com/edit/angular-gima49-vcpbjv "Dragging and dropping nodes in Angular hierarchical tree StackBlitz demo").

```js
public drop(args: IDropEventArgs) {
    //Argument element is used to get the dropped node.
    let node: NodeModel = args.element as NodeModel;
    //Gets the connector that connected to dropped node.
    let edges: string[] = this.diagram.getEdges(node);
    let connector: ConnectorModel = this.diagram.getObject(edges[0]);
    //Argument target is used to get the hovered node.
    connector.sourceID = (args.target as NodeModel).id;
    this.diagram.dataBind();
    // doLayout is used to rearrange the nodes and connectors in the diagram.
    this.diagram.doLayout();
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Dragging-and-dropping-nodes-in-a-hierarchical-tree-with-multiple-parents-using-the-Angular-Diagram-component.gif" alt="Dragging and dropping nodes in a hierarchical tree with multiple parents using the Angular Diagram component" style="width:100%">

  <figcaption>Dragging and dropping nodes in a hierarchical tree with multiple parents using the Angular Diagram component</figcaption>

</figure>

### Spacing

You can adjust the spacing between each level of the multiparent tree diagram both horizontally and vertically. You can also define a margin around the multiparent diagram.

Refer to the following code example and find it on [StackBlitz](https://stackblitz.com/edit/angular-gima49-yna1ez "Customizing the spacing between nodes in Angular hierarchical tree diagram StackBlitz demo").

```js
public layout: LayoutModel = {
    type: 'ComplexHierarchicalTree',
    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
    horizontalSpacing: 70,
    verticalSpacing: 70,
    orientation: 'TopToBottom',
    margin: { left: 10, right: 0, top: 50, bottom: 0 },
};
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Customizing-the-spacing-between-nodes-in-a-multiparent-hierarchical-tree-using-Angular-Diagram-component.png" alt="Customizing the spacing between nodes in a multiparent hierarchical tree using Angular Diagram component" style="width:100%">

  <figcaption>Customizing the spacing between nodes in a multiparent hierarchical tree using Angular Diagram component</figcaption>

</figure>

## Zooming and panning

Viewing a large diagram on a small screen can be challenging. In that case, zooming and panning help us provide a more detailed view of the hierarchical tree diagram.

You can zoom in and out of the diagram using the **Ctrl + mouse wheel** shortcut key.

Refer to the following code examples (or on [StackBlitz](https://stackblitz.com/edit/angular-gima49-pcukao "Zooming and panning in Angular hierarchical tree diagram StackBlitz demo")) to enable zooming and panning support in the Diagram component.

**[HTML]**

```xml
<div class="control-section diagram-complex-hierarchical-tree">
 <div class="content-wrapper">
  <ejs-diagram #diagram id="diagram" width="100%" height="800px" [getConnectorDefaults]="connDefaults" [getNodeDefaults]="nodeDefaults" [layout]="layout" [tool]="tool" [dataSourceSettings]="data" [snapSettings]="snapSettings" (created)="created()" (drop)="drop($event)">
  </ejs-diagram>
 </div>
</div>

```

**[TS]**

```js
//Enable pan tool
  public tool: DiagramTools = DiagramTools.ZoomPan;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Zooming-and-panning-in-the-multiparent-hierarchical-tree-using-the-Angular-Diagram-component.gif" alt="Zooming and panning in the multiparent hierarchical tree using the Angular Diagram component" style="width:100%">

  <figcaption>Zooming and panning in the multiparent hierarchical tree using the Angular Diagram component</figcaption>

</figure>

## Exporting

You can easily export the diagram to different image formats such as PNG, JPEG, and SVG.

Refer to the following code example (or on [StackBlitz](https://stackblitz.com/edit/angular-gima49-glveee "Exporting Angular hierarchical tree StackBlitz demo")) to explore this feature.

```js
let exportOptions: IExportOptions = {};
    exportOptions.format = args.item.text as FileFormats;
    exportOptions.mode = 'Download';
    exportOptions.region = 'Content';
    exportOptions.multiplePage = false;
    exportOptions.fileName = HierarchicalTree;
    this.diagram.exportDiagram(exportOptions);
```

## Conclusion

Thanks for reading! In this blog, we’ve seen how to create and customize a multiparent hierarchical tree diagram using the Syncfusion [Angular Diagram library](https://www.syncfusion.com/angular-components/angular-diagram "Angular Diagram library"). With the same component, you can also create flowcharts, organizational charts, floor plans, UML diagrams, and BPMN charts. Try out the steps in this blog, and give us your feedback in the comments section!

If you want to try the Diagram library, you can download our [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products"). You can see the Diagram library [live demo](https://ej2.syncfusion.com/angular/demos/#/material/diagram/default-functionalities "Syncfusion Angular Diagram component live demo") and [documentation](https://ej2.syncfusion.com/angular/documentation/diagram/ "Angular Diagram component documentation") for detailed explanations.

If you have any questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide](https://www.syncfusion.com/blogs/post/angular-radial-tree-diagram.aspx "Blog: Creating Radial Tree Diagrams with Syncfusion Angular Diagram Library: A Complete Guide")
- [Next-Level Charting: Explore the New Angular Range Step Area Chart](https://www.syncfusion.com/blogs/post/angular-range-step-area-chart.aspx "Blog: Next-Level Charting: Explore the New Angular Range Step Area Chart")
- [Angular 16 Unveiled: Discover the Top 7 Features](https://www.syncfusion.com/blogs/post/angular-16-top-7-features.aspx "Blog: Angular 16 Unveiled: Discover the Top 7 Features")
- [5 Front-End Web Frameworks to Consider Other Than React](https://www.syncfusion.com/blogs/post/5-front-end-web-frameworks-other-than-react.aspx "Blog: 5 Front-End Web Frameworks to Consider Other Than React")