• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / Drag and Drop in Angular 6 using ASP.NET Core Web API

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

February 16, 2019 by mebakar1005 Leave a Comment

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.

See also  Routing in ASP.NET Core 2.0 Application
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.

See also  Introduction to ASP.NET Core 2.0

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

How to add two factor authentication (2fa) in angular 7 using firebase
How to add Treeview in Angular 6 and Asp.Net Core Application

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, ASP.NET Core, web API Tagged With: Angular 6, ASP.NET CORE, Drag and Drop

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
  • Most Popular Dating Apps For Black Gay – Remanufactured Online Hookup for Gays
Copyright © 2022