Angular Material Drag and Drop

Updated February 15, 2023

Introduction to Angular Material Drag and Drop

Angular material drag and drop provide a way to easily create the interfaces of drag and drop by using the support of sorting, transferring, and dragging. We need to import the DragDropModule into the NgModule to use the angular material drag and drop feature. We can also add the cdkDrag directive to an element that makes them draggable. The element of cdkDropList outside into the draggable elements is freely moving.

What is Angular Material Drag and Drop?

We can add a cdkDropList element in AngularJS to constrain where our element will be dropped. The feature is added in angular 7; CDK will help us to drag and drop the elements from the list. To use it, we need to install the dependency of CDK by using the npm command.

The angular CDK is a development kit containing a set of tools and, at the same time, adding cdkDropList around with cdkDrag elements groups the draggable into a collection of reorderable. It is essential.

How to Use Angular Material Drag and Drop?

The below steps show how to use the angular material drag and drop. But first, we need to install angular material CLI in our system to work on it.

The below example shows how to install angular material CLI.

1. To work on angular material drag and drop, we need to install the Angular CLI in our system. We can install the angular CLI by using the npm command.

Code:

npm install -g @angular/cli

Output:

2. After installing the Angular CLI in this step, we create the workspace for our angular project. We are making the workspace name as angular-material-DragDrop. The example below shows the workspace of our angular project as follows. We are adding angular routing; this option will pop up when creating a workspace. Also, we are selecting the stylesheet format as CSS.

Code:

ng new angular-material-DragDrop

Output:

3. After creating the project’s workspace in this step, we install the angular CDK, angular animations, and angular material.

Code:

npm install @angular/cdk –save

Output:

4. After installing angular material, cdk, and animations modules in this step, we are adding the same in our project. The below example shows add the angular material library as follows.

Code:

cd angular-material-DragDrop/
ng add @angular/material

Output:

5. Now, we are importing the drag-and-drop module into the app.module.ts file.

Code:

import { BrowserModule } from '@angular/platform-browser';
…….
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule
],
Providers : [MyserviceService],
Bootstrap : [AppComponent]
})
export class AppModule { }

Output:

6. We import the drag-and-drop module from the @angular/cdk. In the below example, we create the service fetching data from the API as follows.

Code:

import { Injectable } from '@angular/core';
……
getData () {
return this.http.get (this.dragdropurl);
}

Output:

7. Now, we call this service into the app.component.ts file.

Code:

import { Component } from '@angular/core';
…….
this.details = Array.from (Object.keys (data), k=>data[k]);
console.log (this.details);
});

Output:

8. Now, add the following code to the app.componet.html file.

Code:

<h3>Still Doing</h3>
<div cdkDropList
[cdkDropListData] = "details"
……
{{item.name}}
</div>
</div>;

Output:

Tool

• The tool is nothing but one of the development kits of components in common behaviors.
• The tool contains the directive, which was enabled top on the notch of capabilities of component parts.
• The angular cdk drag and drop module will provide a way to declaratively and easily create the interface of drag and drop, which supports the dragging, which is free.
• We need an angular version of 9 or above to use the tool. The below example shows to check the angular version.

Code:

ng –version

Output:

• In this step, we are creating the workspace for our angular project. We are creating a workspace name angular-material-draganddrop. The example below shows the workspace of our angular project as follows. We are adding angular routing; this option will pop up when creating a workspace.

Code:

ng new angular-material-draganddrop

Output:

• We are installing the angular cdk module using the npm command.

Code:

npm install @angular/cdk@latest

Output:

• Now we are creating the app.module.ts file as follows.

Code:

import { AppRoutingModule } from './app-routing.module';
…..
})
export class AppModule { }

Output:

• Now we are creating the app.component.ts file as follows.

Code:

import { Component } from '@angular/core';
……
story = [
'Story I - Phantom Menace',
]; }

Output:

Angular Material Drag and Drop CDK

• The CDK is nothing but the angular component development kit, which was used to set the behavior for building the component of UI.
• As we can say that cdk is used to implement the angular component.
• We are installing the cdk by using the npm command as follows. In the below example, we install the angular material drag and drop CDK as follows.

Code:

npm install @angular/cdk –save

Output:

• The CDK is a kind of abstraction for the angular material library with a specific material design.
• The cdk provides more unique ways for creativity while building an angular component.

Conclusion

We can add a cdkDropList element in AngularJS to constrain where our element will be dropped. The feature is added in angular7. They provide a way to quickly create drag-and-drop interfaces using the support of sorting, transferring, and dragging.

Recommended Articles

This is a guide to Angular Material Drag and Drop. Here we discuss the introduction and how to use the angular material drag and drop with the tool and CDK. You may also have a look at the following articles to learn more –

1. Angular Material Overlay
2. Angular Material NPM
3. Angular material radio button
4. Angular material slider