Drag and Drop in Angular using Angular Material

In this article, we discuss how to create drag & drop in angular using angular material. Let’s create a new project for Drag and Drop in angular for that you need to run the following command to create a project.


ng new drag-drop-demo

“drag-drop-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd drag-drop-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the Angular material & Angular Material CDK npm package in our application. run below command to install.


npm install @angular/material
npm install @angular/cdk



After installing we need to import “DragDropModule” from the “cdk” in app.module.ts file dsiplay in the below code.


......
import { DragDropModule } from '@angular/cdk/drag-drop';
.......
@NgModule({
.........
  imports: [
DragDropModule,
.... 
]
......

We use “CdkDropList” service : its the container that holds the draggable elements “CdkDropList” directive we used.

[cdkDropList] cdk-drop-list

we implemnt “drop” method to store the data which we drag from one container to another container.
We take an example of the Hobbies list is in one container we darg from the other container which is my hobbies list. we can change the position of the options.
Let’s create app.component.ts file in which we import the CDK modules and the created “Drop” method which stores data.


import { Component, VERSION } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  // Transfer Items Between Lists
  HobbiesList = [
    'Signing',
    'Dancing',
    'Wtaching Movies',
    'Cooking',
    'Blogging',
    'Travelling',
    'Painting',
    'Photography',
    'Sewing'
  ];

  MyHobbies = [
  ];

  onDrop(event: CdkDragDrop) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }  
}

After we need to add below code in our “app.component.html” file.


<h2 class="maintitle">Drag & Drop in Angular using Angular Material</h2>
<div class="card container">
  <div class="row"> 
   <div class="col-sm-6">
      <h4>Hobbies List</h4>
   <div 
        cdkDropList 
        #hobbiesList="cdkDropList" 
        [cdkDropListData]="HobbiesList"
        [cdkDropListConnectedTo]="[doneHobbiesList]" 
        class="hobby-list" 
        (cdkDropListDropped)="onDrop($event)">
        <div class="hobby-block" *ngFor="let hobbiesList of HobbiesList" cdkDrag>{{hobbiesList}}</div>
      </div>
   </div>

    <div class="col-sm-6">
       <h4>My Hobbies</h4>
          <div 
          cdkDropList 
          #doneHobbiesList="cdkDropList" 
          [cdkDropListData]="MyHobbies"
          [cdkDropListConnectedTo]="[hobbiesList]" 
          class="hobby-list" 
          (cdkDropListDropped)="onDrop($event)">
          <div class="hobby-block" *ngFor="let myHobbies of MyHobbies" cdkDrag>{{myHobbies}}</div>
        </div>
    </div>
  </div>

</div>



After adding it display the below output in application.

Below is the full embeded code Drag and Drop in Angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 2
  •  
  •