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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div>
<!-- container for both list  -->
  <h1>To do</h1>
  
<!-- To-Do list  -->
  
  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListConnectedTo]="[doneList]"
    [cdkDropListData]="todo"
    (cdkDropListDropped)="drag($event)">
    <div *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>
  
<div>
  
  <h1>Done</h1>
  
<!-- Done list  -->
  
  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListConnectedTo]="[todoList]"
    [cdkDropListData]="done"
    class="example-list"
    (cdkDropListDropped)="drag($event)">
    <div *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

chevron_right


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
filter_none

edit
close

play_arrow

link
brightness_4
code

export class To-Do {
  
// hardcoded lists
  
  todo = [
    'Go to gym',
    'Eat lunch',
    'Take a nap',
    'Physics syllabus'
  ];
  
  done = [
    'Assignment',
    'Coding practice',
    'Maths syllabus',
    'English syllabus'
  ];
  
//function for listening to the event
  
  drag(event: CdkDragDrop<string[]>) {
  
//if movement if within the same container
  
    if (event.previousContainer === event.container) {
      moveItemInArray(
event.container.data, event.previousIndex, event.currentIndex);
    
  
//if movement if to other containers
  
    else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}

chevron_right


Output: successful Dragging of ‘Eat lunch’ from To do list to done list.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.