How to create a To-Do list using Drag and Drop in Angular 7 ?

We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command-

 ng g c To-Do 

Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do component, Writing the code for component view: Create two divisions, one for the items that are TO BE DONE and other for items that are COMPLETED. These are some of theparameters:

1. cdkDropList: It lets the division know that it is a drop container
2. cdkDropListData: It binds the data to the view
3. cdkDropListConnectedTo: It gets the id of another drop container that the current division is connected to
4. cdkDropListDropped: After dragging the items, the data model has to be updated. For that, we can listen to this event
5. cdkDrag: it specifies that the item can be dragged

Example: Now write the code for listening the event and adding the data. Here we used a hardcoded list but you can always take input by using ngmodel directive. There are two possibilities:

1. Item is dragged to the same container: Use moveItemInArray to move it in the same container
2. Item is dragged to another container: Use transferArrayItem to move to another container

Output: successful Dragging of 'Eat lunch' from To do list to done list. 👁 Image