Drag and Drop in Angular 6 using ASP.NET Core Web API

In this tutorial, we are going to learn how to implement drag and drop (dnd) functionality in Angular 6 and ASP.NET Core web API with the help of Angular Material. Angular material provides us lots of services that help us to make development quickly.

Angular material provides us drag and drop (dnd) cdk (Component Development Kit) to add drag and drop functionality in our project. This is very easy to implement it. We will explore it with very simple drag and drop example in angular 6 application.

First-of-all, we will install angular material in our project, then we will import DragDropModule in our application module, and then we will start the implementation of HTML and typescript.

Drag and Drop ( dnd ) in Angular 6 using web API.

Let’s start by exploring how to implement drag and drop in angular 6 using web API.

Step # 1: Install Angular Material

First-of-all, we will install angular material in our angular 6 application. So, run this below command to install angular material.

npm install –save @angular/material @angular/cdk

After some time, it will be installed in our project. You can see in package.json file.

Step # 2: Import Drag and Drop modules

Now, in this step we will import DragDropModule in our project’s app.module.ts file. So, go to app.module.ts file and then import this below line of code at the top of the file.

import { DragDropModule } from ‘@angular/cdk/drag-drop’;

Now, add this below code within the exports (which is under the @NgModule).

DragDropModule

Now, go to component where you want to implement Drag and Drop functionality. Then go to .ts file and then write this below line of code at the top of this file.

import { CdkDragDrop, moveItemInArray, transferArrayItem } from ‘@angular/cdk/drag-drop’;

Step # 3: Write typescript file code

Now, in this step, we will write some typescript code. Just copy this below code and then write in your component.ts file.

Let’s understand the above code.

Line # 4: Here in this line we are importing some CdkDragDrop, moveItemInArray, transferArrayItem from angular drag and drop cdk.

Line # 12, 13: Here in these lines, we are declaring array type objects. In these objects, we will push all the record from database and then we will show in front end.

Line # 27 to 40: In these lines, we are fetching all the record from database using services.

Line # 43 to 57: This is a drop method. This method will be called whenever we will drag an item from one list to another.Line # 55: Here in this line, we are calling boardChanges function with three parameters.

Line # 59 to 68: Here in these lines, we are are calling the update service which will update the record from database.

Step # 4: Add front-end code for drag and drop board

Now, in this step, we will add some front-end code for drag and drop board. So, copy this below code and then paste into the html file.

Step # 5: Add some styles

Now, in this step we will add some styles for front-end. So, open .css file and then add some css code as you see in below file.

Now, run your project and then you will see the output as you see in below.

Thank you for reading this post. Please keep visiting and sharing.