How to get the palette's information from a node being dragged in Angular Diagram?

This article explains how to retrieve the palette information of a node while it is being dragged in the Syncfusion® Angular Diagram component. In a diagram, users can drag and drop nodes or connectors from the symbol palette onto the diagram surface. During this drag-and-drop process, certain events, such as the dragEnter event, are triggered. These events can be leveraged to implement custom actions, including retrieving the palette information of the dragged node or connector.

The dragEnter event is specifically called when a node or connector is dragged from the symbol palette into the diagram area. By handling this event, we can iterate through the palette to find the selected symbol and retrieve palette information such as the palette ID, title, and symbols. In the sample below, we log the palette ID to the console during the dragEnter event.

 public dragEnter(args: IDragEnterEventArgs): void {
   // Iterate through each palette in the source's palettes array
   for (const palette of (args.source as any).palettes) {
     // Retrieve the symbols array from the current palette
     const symbols = palette.symbols;
     // Get the ID of the currently selected symbol being dragged
     const selectedSymbolId = (args.source as any).selectedSymbols.id;
     // Find the symbol in the palette's symbols array that matches the selected symbol ID   
     const foundSymbol = symbols.find(symbol => symbol.id === selectedSymbolId);
     // If a matching symbol is found, log the palette id to the console   
     if (foundSymbol) {
       console.log(palette.id);
     }
   }
 }

Please refer to the working sample for reference.
Sample

Conclusion
I hope you enjoyed learning how to get the palette’s information from a node being dragged 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!