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.

Check the working demo link.

Also, check post on Angular Material 7 Virtual Scroll Example

Leave a Reply

Notify of