DragDrop List Using Angular Application

Hello Readers,

In this article, I am going to show you how to implement Drag and Drop Lists in angular application. Now, you must be wondering that what is Drag and Drop Lists. Right!? Well, it’s natural. Now, assuming the case, where you have two lists: one for the list of items those you have not done yet i.e. pending list and, the other for the list of items those you have successfully completed i.e. done list. Now, it’s natural that as soon as you complete the pending thing you will move that item to the list of completed things. Moreover, you always have your priorities for the things which are there on your pending list. While using these dropdown lists you can rearrange your priorities anytime easily.

In simple words, drop down lists give you facility to move your items from one list to other as well as rearrange items of the same list. Well, before starting actual implementation of it, I would like to show you one demo of what we will be implementing at the end of this article.

So, let’s now start implementation, the first step is to create new app, install Angular Material into your app and the end run it.

Ng new angular-dragdroplist -app

Cd angular- dragdroplist -app

ng add @angular/material

ng serve

Here, I am adding the screenshot of the process that above mentioned material command will do.

Angular material will add BrowserAnimationsModule to your app.module.ts. Now, the obvious question is what is Angular Material?

It is library developed by Angular Team. Buildings of high quality UI Component build on Angular and based on Google’s Material.

Earlier, to install angular material on your computer we had to go through tedious long step. Now, it is replaced by on single command.

So, now let’s move to next part. Open up your newly created angular application. And add this into your app.module.ts

Now, next question is what is CDK? Right!? CDK give developers more tools to build awesome components for web. Also, it allows us to use features of angular material without adopting the material design visual language.

Next step is to add following code to your app.component.html

Here, I am binding two lists to my html: one is todo and the other one is done. They both are of type cdkDropList.

I have assigned name to both the forms using template reference, in my case #todoList and #doneList.

Next, I am assigning data to both the list using property cdkDropListData and as a value I have assigned the name of the array which I want to give it as a data.

Next, I am establishing the connection between my two lists using the property cdkDropListConnectedTo.

cdkDropListDropped is the event I am binding with my two lists. It will be fired when any of the items is dropped from the list.

At the last, I am looping through my array and have assigned items to the lists.

Next, add this following code to your app.component.ts

First, import three items cdkdragDrop , moveItemInArray, transferArrayItem from @angular/cdk/drag-drop.

Next, create two arrays one for todo and one for done respectively.
And, lastly create the function named drop which will be fired whenever one of the items will be moved (as I have explained before).

Now, as we know, drop function will be called in two cases: one, when we want to rearrange the items within one list only and the other case, where we want to move the item from one list to other.

So, that’s the only condition I am checking inside my function.

If the previous container of the item is same as the current one, then we want to moveItemInArray of one list and if it is not the case, then we want to transferItem from one list to the other one.

So, now it should work as per the demo I have showed you earlier.

Thank You!