How to Create Hierarchical Tree with HTML Code in Angular Diagram?

This article explains how to create a hierarchical tree with HTML code in Angular Diagram. In HTML, content can be added in the Angular Diagram through an HTML-type node. The shape property of the node allows you to set the type of node, and to create an HTML node, it should be set as “HTML”.

Diagram provides support to create a hierarchical tree layout, which is used to arrange nodes automatically based on predefined layout logic.

Create Hierarchical tree layout in diagram

1. To generate a layout from the DataSource, you have to define the business object and add the necessary data to the DataSource collection. During the layout generation, nodes and connectors can be generated automatically with the information provided through the DataSource, and those items will be added to the NodeCollection and ConnectorCollection respectively.

2. To arrange the nodes in a hierarchical structure, specify the layout type as HierarchicalTree.

`<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults" [snapSettings]="snapSettings" [layout]="layout" [dataSourceSettings]="dataSourceSettings">
<ng-template #nodeTemplate let-data>
  <ng-container>
      <div>
        <h1 class="myTitle">{{ data.data.Role }}</h1>
    </div>
  </ng-container>
</ng-template> 
</ejs-diagram>`,


ngOnInit(): void {
       this.snapSettings = {
           constraints: 0
       }
       this.items = new DataManager(this.data as JSON[], new Query().take(7));
       //Uses layout to auto-arrange nodes on the Diagram page
       this.layout = {
           //Sets layout type
           type: 'HierarchicalTree'
       }
       //Configures data source for Diagram
       this.dataSourceSettings = {
           id: 'Id',
           parentId: 'Manager',
           dataSource: this.items
       }
   } 

Create the Hierarchical layout with HTML Node

1. To create an HTML node, you should set the type of node shape to HTML.
2. To add HTML code, define the HTML code in the nodeTemplate.

//Sets the default properties for all the Nodes
   public getNodeDefaults(obj: NodeModel, diagram: Diagram): NodeModel {
       obj.shape = {
           type: 'HTML',
       };
       obj.backgroundColor = '#6BA5D7'
       obj.width = 80;
       obj.height = 80;
     
       return obj;
} 

<ng-template #nodeTemplate let-data>
  <ng-container>
      <div>
        <h1 class="myTitle">{{ data.data.Role }}</h1>
    </div>
  </ng-container>
</ng-template> 

Sample: Hierarchical Tree with HTML Code

Conclusion

We hope you enjoyed learning how to create a hierarchical tree with HTML code in Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!