Angular CDK nested Drag And Drop

Building multi level, sortable drag and drop lists

Today I am going to show you how to build nested, multi-level, drag and drop lists. Without relying on paid 3rd party or unsupported libraries.

Why?

Working as software developers, It’s not uncommon to be restricted to particular libraries and tool.

In my case, the company I work for required a normalized Backoffice for business to manage navigation between different applications and countries. After gruelling research, I discovered that the DragAndDrop module does not support nested lists and using SortableJS was not an option.

After a considerable amount of research, I think I found the solution.

Which I would like to share with you, who might be in a similar situation.

Hopefully, this article will help others in a similar situation. To save time, and deploy awesome products!!

⚡️ Project Dependencies😮 🔔

• Angular CLI: @anglar/cli@12.0.2
• Angular CDK: @angular/cdk@12.0.4
• Angular Material (optional)

Setting Up

To get started navigate to the selected directory, and create a new application.