I am trying to implement a dashboard page with different types of widgets. Will show a tool box on side bar. User can drag small tool icons from side bar into the GridStack container. After drop the I should render the corresponding component based on the widget dropped. Each widget is a separate component.

I tried to use ngFor sample to render the widgets list. In that case, to add new items to the list, I need to know the widget type dropped from tool box. But dropped event/added event doesn't provide the original tool box element which has data- attributes to identify widget type.

If your suggestion is to avoid using "acceptWidgets" in this scenario and add drop event listeners for manual handling, I am losing the UI behaviours of GridStack.

Any suggestions will be appreciated.