How to Upload Image Node into Palette of Angular Diagram?

This article explains how to upload an image node into the palette of an Angular diagram. In the Angular Diagram & symbol palette, you can add an image node with a hyperlink. The hyperlink is visible only when you drag an image node from the palette onto the diagram. The shape property of the node allows you to define the type of node.

To create an image node, set the shape property to Image. The annotations property allows you to set the hyperlink. To add a hyperlink, use the annotations property. Within the hyperlink, specify the hyperlink text using the content property. Then, use the link property to define the destination URL.

The following code explains how an image node with a hyperlink is created:

private nodes: NodeModel[] = [
   {
     id: "image",
     //sets the type of the shape as HTML
     shape: {
       type: 'Image', 
       source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png' 
        },
        annotations:[{
         hyperlink:{
           content: 'This is Image Node', link: 'https://ej2.syncfusion.com/angular/documentation/diagram/labels#hyperlink',
           //Set the link to open in the current tab
           hyperlinkOpenState:'CurrentTab'
         }
        }]
   }
 ]; 

The SymbolPalette displays a collection of palettes, each containing a set of nodes and connectors that can be dragged and dropped into the diagram. Each palette allows you to display a group of related symbols and includes a header to annotate the group textually. To display an Image node in the symbol palette, use the palette’s symbols property to define the Image node. This ensures that the defined Image node is displayed within the symbol palette.

Refer to the following code sample to see how to define an Image node with a hyperlink in the palette symbols:

public palettes: PaletteModel[] = [
   {
     id: "flow",
     expanded: true,
     symbols: this.nodes,
     iconCss: "shapes",
     title: "Image Shapes"
   }
 ]; 

Refer to the working sample for your reference: Sample

Conclusion

We hope you enjoyed learning how to upload an image node into the palette of the 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!