Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

Angular Material 7 has introduced two major updates, Virtual Scroll, and Drag and Drop. Both these features prove very useful and productive from a user perspective. You can check my previous post on Virtual Scroll here. In this post, we will create an application to demonstrate Drag and Drop functionality in Angular Material 7.

Drag and Drop enables a user to move anything from one place to another in a web application with the help of a mouse, this helps in creating interactive, highly simple clean user interface. In our application we will have three user lists i.e Still Doing, Done and Nevermind. A user can drop an item from any list and can drop to any other list.

After completing our application will look like this

Let’s start …

Also, check post on Angular Material 7 Virtual Scroll Example

Create new Angular 7 App

We will use Angular CLI to create an application, for that you must have the latest version installed

Run following to create a new app

After running this, CLI will ask for routing and style sheet format. This confirmation is introduced in the latest CLI version.

If you have Visual Studio Code( VS Code ) installed, run following to open in the project in VS Code

Open application server on the browser.

Drag and Drop Module

To implement Drag and Drop, We need to install Angular CDK package and import  DragDropModule in the application module.

After the successful install, we will import DragDropModule in app.module.ts

HTML list directive

Now we add Drag and Drop lists in app.component.html

Above is the list of tasks for Still Doing. 

  • cdkDropList directive as a droppable list
  • #pendingList is list identifier
  • cdkDropListData takes list object
  • cdkDropListConnectedTo tells about, to which list it can communicate or drag and drop lists. We can add any number of lists, it takes an array or identifier list names.
  • cdkDropListDropped binds and event, fired when an item is dropped in this list.

After adding all three lists final HTML will look like this


Lists Components

In app.components.ts we will define list objects and Droppable Event to arrange items in a list after a new item is added or removed from another list.

List Item Styling

In this sample, we have used bootstrap CSS styling by adding following CDN path in index.htm

In app.component.scss, add the following style to make it look pretty

That’s all, now you will be able to see the working application having three lists, from which you can drag any item to drop back in same or another list.

Dynamic Inter Draggable & Droppable Lists

Sometimes we may need lists dynamically generated, in that case, we can use the id in place of # template variables

Push ID’s in the connectedTo array.


Check the working demo link.

Also, check post on Angular Material 7 Virtual Scroll Example

Leave a Reply

3 Comment threads
6 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
NistbhuminAlpJolly.exeAlp Ergüney Recent comment authors
newest oldest most voted
Notify of
Alp Ergüney

Hey mate,
Great article! However, I need to create my lists in the run time as I have a week view component where you can navigate through weeks. Week view comprises day views, and I’m creating them with a loop rather than adding the same code 7 times i.e. once for each day.

#dayList=”cdkDropList” [cdkDropListData]=”dayData” [cdkDropListConnectedTo]=”[dayList]”
dayData array works fine but using #dayList variable as the only parameter in [cdkDropListConnectedTo] seems to be an issue.

Any tips on how I can make it work would be amazing.



nee help to develop dynamic drag drop using two page ( mat-drawer-container ) to Tab Page


Hi, thanks a lot for this well explained tutorial. The first part works like a charm. However, the dynamic part does not seem to work. Could you confirm that this actually works? I tried creating a new blank project, adding a component for both examples and only the first one (non dynamic) works. I tried debugging but without any succes. Thanks a lot for your help.