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:
- cdkDropList: It lets the division know that it is a drop container
- cdkDropListData: It binds the data to the view
- cdkDropListConnectedTo: It gets the id of another drop container that the current division is connected to
- cdkDropListDropped: After dragging the items, the data model has to be updated. For that, we can listen to this event
- cdkDrag: it specifies that the item can be dragged
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
- Item is dragged to the same container: Use moveItemInArray to move it in the same container
- 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.
- How to Create Todo List in Angular 7 ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- HTML | Drag and Drop
- Drag and Drop Files in ElectronJS
- How to create a group of related options in a drop-down list using HTML ?
- How to Create ToDo App using ReactJS ?
- How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
- How to create button dynamically with click event in Angular ?
- How to generate a drop down list of timezone using PHP ?
- How to define a drop-down list in HTML5 ?
- How to select first element in the drop-down list using jQuery ?
- How to change selected value of a drop-down list using jQuery?
- How to get selected text from a drop-down list using jQuery?
- Adding Angular Material Component to Angular Application
- Angular 7 | Angular Data Services using Observable
- Angular CLI | Angular Project Setup
- Routing in Angular JS using Angular UI Router
- How to create To-Do List using jQuery?
- How to create an ordered list using HTML5 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.