How to Add HTML Nodes in Symbol Palette of Angular Diagram?

In the Angular Diagram & symbol palette, you can add an HTML node. HTML elements can be embedded in the diagram using the 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. The following code explains how an HTML node is created. Please refer to the following code example for how to define an HTML node.

let nodes: NodeModel = [{
// Size of the node.
width: 100,
height: 100,
// Sets the type of the shape as HTML.
shape: {
    type: 'HTML',
    content: '<div style="background: #6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px"> Button</button></div>'
}
}];

The SymbolPalette displays a collection of palettes. The palette shows a set of nodes and connectors. It allows dragging and dropping the nodes and connectors into the diagram. A palette displays a group of related symbols and textually annotates the group with its header. By using the palette’s symbols property, you can define the HTML symbols so that the defined the HTML symbols. So that the defined HTML node is displayed in the symbol palette. Please refer to the following code sample for how to define the HTML node in the palette symbols.

let palettes: PaletteModel[] = [{
                // Sets the id of the palette.
                id: ‘html’,
                // Sets whether the palette expands or collapse its children.
                expanded: true,
                // Adds the palette items to palette.
                // Here, nodes are defined in the above code sample.
                symbols: nodes
                // Sets the header text of the palette.
                title: ‘HTML Shapes'           
          },
];

Sample: https://stackblitz.com/edit/angular-8vy8jg

Conclusion
I hope you enjoyed learning how to add HTML nodes in symbol palette of 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!