How to create layout with HTML node in Angular Diagram?

This article explains on how to create layout with HTML node in Angular Diagram.
HTML elements can be seamlessly integrated into diagrams using the HTML-type node. To designate a node as an HTML node, specify the type within the shape property of the node as HTML.

Our diagram tool comes equipped with a range of built-in automatic layout algorithms, designed to organize nodes automatically following predefined layout logics.
The available layout modes include:

Hierarchical Layout: Organizes nodes in a hierarchical structure.

Organization Chart Layout: Displays the structure of an organization and relationships.

Radial Tree Layout: Arranges nodes in a radial pattern emanating from a central point.

Symmetric Layout: Provides a symmetrical arrangement of nodes.

Mind Map Layout: Positions nodes in a way that resembles a mind map.

Complex Hierarchical Tree Layout: An extended version of the hierarchical tree layout where a child can have two or more parents.

These layout modes enhance the visual representation of information in the diagram, offering flexibility and adaptability to different structural requirements.

To create a html node with template:

HTML elements can be incorporated into the diagram using the HTML-type node. The shape property of the node enables you to specify the type of node. The following code exemplifies the creation of an HTML node with a template.

<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
   <ng-template #nodeTemplate let-data >
       <ng-container *ngIf="data.id == 'Node'">
           <input type = "button" value="Node"  >
       </ng-container>
       </ng-template>
       <e-nodes>
           <e-node id='Node' [offsetX]=150 [offsetY]=150 [height]=100 [width]=100 [shape]='shape'></e-node>
       </e-nodes>
   </ejs-diagram>

export class AppComponent {

   @ViewChild('diagram')
   public diagram?: DiagramComponent;

   public shape: HtmlModel = {
       type:'HTML'
   };
}    

To create an automatic layout with html node:

To implement an automatic layout, it is necessary to define the layout property of the diagram and specify the desired layout type. Refer to the code snippet below for guidance

public layout: LayoutModel = {
   type: 'OrganizationalChart',
   horizontalSpacing: 80,
   verticalSpacing: 70,
 };

The creation of nodes is determined by the parent-child relationships outlined in the provided data object. Each relationship within the data structure contributes to the generation and organization of nodes within the diagram.

public data: object = [
   {
     Id: 'parent',
     Role: 'Board',
     color: '#71AF17',
   },
   {
     Id: '1',
     Role: 'General Manager',
     Manager: 'parent',
     ChartType: 'right',
     color: '#71AF17',
   },
   {
     Id: '11',
     Role: 'Assistant General Manager',
     Manager: '1',
     color: '#71AF17',
   },
   {
     Id: '2',
     Role: 'Human Resource Manager',
     Manager: '1',
     ChartType: 'right',
     color: '#1859B7',
   },
   {
     Id: '3',
     Role: 'Trainers',
     Manager: '2',
     color: '#2E95D8',
   },
 ];

To define the layout, it’s essential to set the data source using the dataSourceSettings property of the diagram. For implementation details, refer to the code snippet below.

 public dataSourceSettings: Object = {
   id: 'Id',
   parentId: 'Manager',
   dataSource: new DataManager(this.data),
   doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
     nodeModel.shape = {
       type: 'Text',
       content: (data as EmployeeInfo).Role,
       margin: { left: 10, right: 10, top: 10, bottom: 10 },
     };
   },
 };

The template for the HTML node can be defined as shown below.

<div class="content-wrapper">
           <ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='dataSourceSettings' [tool]='tool' [snapSettings]='snapSettings' (created)="created()">
               <ng-template #nodeTemplate let-data >
                   <ng-container>
                       <div>
                           <div class=" componentSummary">
                             <h1 class="myTitle">{{data.data.Role}}</h1>
                             <div class="componentSummaryDetails">
                               <div class="details">
                                 <h2>0.2 GB</h2>
                                 <span class="pf-emphasis">DATA2</span>
                               </div>
                               <div class="details">
                                 <h2>0.3%</h2>
                                 <span class="pf-emphasis">DATA3</span>
                               </div>
                             </div>
                           </div>
                         </div>
                   </ng-container>
                   </ng-template>
           </ejs-diagram>
       </div>

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to create layout with HTML node in Angular Diagram.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for 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 from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out 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, Direct-Trac, or feedback portal. We are always happy to assist you!