How to Render Layout with Annotation Template in Angular Diagram?

In this article, you can learn about how to render a layout with an annotation template in Angular Diagram. In Syncfusion® Angular Diagram, you can render templated annotations for nodes using a template. This allows you to display custom HTML elements or styled content inside the diagram nodes. The position of the annotations can be controlled using the horizontalAlignment and verticalAlignment properties. To ensure proper alignment, it is necessary to specify the width and height properties for the annotations.

Below is a sample implementation of this approach.

1. Define the Template:
   Use the template property in the annotations array of a node to include custom HTML content, such as buttons, inputs, or any styled div elements.

public localBindData = [
   {
     Id: 'parent',
     Role: 'Board',
     color: '#71AF17',
     annotations: [
       {
         id: 'label1',
         template: '<div><input type="button" value="Submit"></div>',
       },
     ],
   }] 

2. Configure the doBinding :
   When binding data to the diagram, use the doBinding method is used to dynamically assign the annotation template and set additional properties like width, height, and alignment. This ensures the template is displayed correctly within the node.

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [layout]='layout' 
 [dataSourceSettings]='data'></ejs-diagram>

 public data: Object = {
   id: 'Id',
   parentId: 'Manager',
   dataSource: new DataManager(this.localBindData),
   doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
     nodeModel.shape = {
       type: 'Basic',
     };
     nodeModel.annotations = (data as any).annotations; // Assign the template
     (nodeModel.annotations[0] as any).width = 50;
     (nodeModel.annotations[0] as any).height = 50;
     (nodeModel.annotations[0] as any).horizontalAlignment = 'Center';
     (nodeModel.annotations[0] as any).verticalAlignment = 'Center';
   },
 }; 

Sample: Click Here

Conclusion

I hope you enjoyed learning about how to render layout with annotation template 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, BoldDesk Support, or feedback portal. We are always happy to assist you!