Angular Material: Nested / Group Drag And Drop
1
snippet4 mins
v. 19
# Goal
The Angular Material CDK documentation is full of examples for creating draggable and sortable lists so I think it is useless to describe a topic that is already well documented.
However, there is no example that demonstrates the use of draggable nested list where you can:
- sort groups of items
- sort list items inside a group
- transfer items from one list to another
# Zoneless Ready
The example was created using Angular v.19, signals, the new control flow syntax and it's compatible with Zoneless applications
# Real Use Case
I had the need to create this simple script for creating a TODO list where items are organized into groups.
# Demo
Source Code & Interactive Demo
Below is the source code of the demo shown above.
Click or in the editor to practice
src/app.component.ts
src/app.component.css
src/styles.css
src/index.html
src/main.ts
# How it works
The snippet uses Angular's CDK to enable drag-and-drop functionality for lists and items within those lists.
-
cdkDropListGroup: This tag essentially groups the drag-and-drop lists so they can interact with each other. -
cdkDropList: This directive turns a regular div into a drag-and-drop container. -
[cdkDropListData]: This links the list to an array of data in your component. When items are moved, the CDK can update this data. -
(cdkDropListDropped): This event fires when an item is dropped into the list. You use this to update your data based on the new arrangement. -
[cdkDropListConnectedTo]: This lets you specify other cdkDropList containers that items from this list can be dragged into. This is how you enable dragging between different lists. -
cdkDrag: This directive makes an element draggable. Anything with this directive can be picked up and moved.
Think of it like this:
cdkDropListGroupis the overall play area.- Each
cdkDropListis a specific container where things can be dropped. cdkDragmakes individual items grabbable.[cdkDropListConnectedTo]creates connections between containers, allowing you to move items from one to another.(cdkDropListDropped)is how you know when and where something was dropped, so you can update your underlying data.
-
dropItem()handles moving items within the same list or transferring them between different lists, updating the corresponding data arrays. -
dropGroup()handles reordering the main groups within their list.
# Resourses
| Angular Material |
| Angular Material CDK |
| CDK Drag And Drop |
New
Membership Plan, italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
