How to implement drag and drop in Angular 17?

welcome everyone to this angular 17 tutorial in this tutorial we will learn how to implement drag and drop functionality in angular 7 without relying on angular material drag and drop is crucial feature for creating userfriendly interfaces in modern web applications today we will build a simple Task Manager application that allows us to drag and drop task to recognize them so let's get started before we dive into the code make sure you have following prerequisites in place first basic knowledge of angular for example components templates and services are must nodejs npm should be installed on your machine and further angular CLA should be installed globally in your computer and at the end make sure you have a code editor I'm using VSS code in this tutorial but you may use any other if you want so first let's create a new angular project using angular CLA so for that open the terminal and type the command NG new and project name and and press enter this would create a new project for you once it is created use the CD command and project name and go into that project and open it in the editor by using Code dot command it will it should open it in the vs code if it is enabled in your computer so I already have installed my angular project and it is currently running so I will be using that one next let's create a component for our task manager in your terminal run this simple command and g generate component task manager press enter this command generates the necessary files for our component now let's Implement drag and drop so open the task manager component that we just created let's set up the HTML structure for the task manager we will use the native HTML 5 drag and drop features so for that let's just delete the old code and add our own div now here uh we will use the for Loop so we will use the new syntax for the for Loop that came in angle to 17 for that for like this and add the div and then we need to add let task of tasks Track by task. ID we need to add the tasks array first to get rid of this error all right we have few tasks we can use it all right now here we need to add the task do name actually we have to add the task manager component in the app component first then it will show right now it is not available so we have to import this component in our app component so just add uh task manager component here in the Imports array and now we are able to use it look at this uh suggestion is visible now for the app task manager now you can see we have all of the tasks listed let me add another div here here I will add some Styles all right now let's add some attributes from the HTML 5 to enable the drag and drop feature for that if you are trying to add an attribute that is not a directive you have to use ATR now add the name of the attribute that is dragable and give it the Boolean true next we need to listen to some Events first one is drag start and we will call a function that we will create shortly on task drag start and pass the event that we are getting here now listen to another event that is drag over so this will be triggered when you stop dragging okay and here make sure to add the double code okay on task drag over we will again pass the event also there is another event that we need to listen to that is drop on task drop and again pass the event now we need to create these three functions so in the task manager component let's create those missing functions to implement the drag and drop event so here first of all I need to create a property that is drag data and this is going to be a string make it optional and then let's create a function on task drag start and we have event for now give it any type and use this. drag data event do target. inner text okay and then we need to create another function on task drag over and event any and use the prevent default here and at last we will use on task drop again we are getting the event and we will use the prevent default and and use the con Target task is equal to event. Target now we will use the target task do inner task is equal to this. drag data to transfer the data to it now we need to add some styles to decorate it next we need to Target the child div in this element grab okay we need to add decorate the active CL uh active state on the div now let's test the drag and draw functionality so this is the task right now this is what we have I think I did a mistake here I should not add uh these events and attribute here we should have added it here instead now it should work just fine so reload it so you can customize this drag and drop Behavior to whatever way you want to use so here instead of replacing the inner data you can replace the inner data but you can move the data of the element where it was dropped to the first position so you can make such kind of changes so for example you can save the target element here and instead of saving its text I will save that element in that now you can use that inner text and on the target element you will replace the inner text with the task that was being dragged so let's give it a try so instead of doing putting it here I will keep it on the top here now let's give it a try so basically we should save the data of both targets so like this now we should replace the text by using these variables okay now let's give it a try drag and drop and you can see task three has moved above and task one has been moved down and so on you can make changes like this so this is just a very simple example implementation just to show you how you can make use of uh drag and drop but uh if you have more complex use case or whatever uh logic that you want to implement you are free to implement by your own Method All Right congratulations you have successfully implemented the drag and drop functionality in angular 17 without angular material or any other third party Library so this feature can be powerful addition to your web applications enhancing user experience and interactivity you can further customize and spand on this functionality to create more complex applications thank you for watching if you found this tutorial helpful then please like subscribe and share it with others if you have any questions or feedback or suggestion you may share it in the comment section further please don't forget to click on the Bell icon so that you don't miss any notification for my upcoming videos thank you for watching see you next time goodbye

Channel: AyyazTech

Views: 2,092

Keywords: Angular 17, Angular CLI, Angular components, Angular development, Angular events, Angular tutorial, Data transfer, Drag and drop, Draggable elements, Frontend development, HTML5, Nodejs, Task Manager app, User experience, Web applications, Web development, Web interactivity, Web interfaces

Id: iWsQ6R-o-dE

Length: 8min 25sec (505 seconds)

Published: Wed Nov 15 2023