How to use Angular7 (angular material) drag drop between two components

@angular/cdk/drag-drop
angular 6 drag and drop example
angular material drag and drop file upload
cannot find module '@angular/cdk/drag-drop
angular drag and drop between components stackblitz
angular 7 drag and drop grid
angular 6 drag and drop list
angular material drag and drop multiple items

As recently angular introduced drag and drop in angular material https://material.angular.io/cdk/drag-drop/overview .

All examples describes with in a single component. How to use this in two different components, Drag one component item and drop into another component.

You may use properties id and cdkDropListConnectedTo to link both lists:

Component 1:

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Component 2:

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

If you need to connect several lists to one list, you may use the following syntax: [cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

After linking the lists, you must correctly update one or both lists depending on the actions. You may do it on the drop function like this:

drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === event.previousContainer.id) {
      // move inside same list
      moveItemInArray(this.list, event.previousIndex, event.currentIndex);
    } else {
      // move between lists
    }
}

For moving items between lists, you will possibly want to keep track of the lists centrally. You may do so by using a Service, a Store or other methods.

Drag and Drop, Start by importing DragDropModule into the NgModule where you want to use drag-and-drop features. You can now add the cdkDrag directive to elements to  The drag and drop module in Angular 7 allows you to drag elements around and a screen and drop them into other areas. In this tutorial we’re going to create two lists and populate them with

Not sure if the above solution still works with angular 7.2.9 and angular material/cdk 7.3.5

It did not work for me and thus after some hard time - I managed to make it work using cdkDropListGroup directive. All cdkDropList within cdkDropListGroup will be available to drop items. You no longer need to connect Drop Lists with cdkDropListConnectedTo property

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

Drag Drop between Custom Angular Components, To handle drag drop operations, you can use standard HTML5 events. Each component should have handlers for dragstart and dragover events. When you drag an object initially, the dragstart event is fired . In your event handler, you need to call the setData method of the DragDrop Service to update the stored object. 2. Set up Angular CDK Drag and Drop API. The angular/cdk/drag-drop module provides access for creating a drag and drop interface with full flexibility. The Angular Component Development Kit (CDK) support free dragging, sorting the list, transferring items from the lists, animations, drag handles, place holders, previews and locking along an axis.

Component1

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Component 2

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

shared Service for both component

drop(event: CdkDragDrop<string[]>) {
        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);
        }
    }

Parent Component

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

call drop method from both the component

drop(event: CdkDragDrop<string[]>) {
      this.sharedService.drop(event);
  }

drag drop between two components · Issue #14229 · angular , I've heard that Angular Material had a new drag and drop CDK in their we can create our first draggable component by using the cdkDrag directive. items = [ '​Item 0', 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', During drag drop operation using the DragDrop Service, you have stored the object that is dragged but also the source component from which the object is dragged and the target component over which the object is dropped. You can use this references to call the add/remove methods and complete the move operation.

Exploring Drag and Drop with the new Angular Material CDK, The drag and drop module in Angular 7 allows you to drag elements around how to install and use the new Drag & Drop Module in Angular 7. In your terminal or command line install the CDK, Material & Animations with the following command: Create two arrays of data in your app.component.ts file. The @angular/cdk/drag-drop module helps us drag single item or sort it within a horizontal/vertical list, transfer items between lists, show animations, previews, placeholders, custom drag handles. In this tutorial, we’re gonna create many simple examples that show you how to work with Angular 7 Material CDK – Drag and Drop.

Learn how to Drag and Drop items in Angular 7 - codeToBe, In the drag and drop lists, items can be dropped across multiple lists or in the same list. In the Angular Material version 7, two major updates were introduced, Here also we will use the Bootstrap CSS style for our Drag and Drop lists. to Impliment Drag Drop in Angular 7, install @angular/cdk/drag-drop  $ cd angular-material-drag-and-drop-lists. If you have Visual Studio Code( VS Code ) installed, run following to open in the project in VS Code $ code . Open application server on the browser. $ ng serve --open # Install Angular CDK Package. The Drag and Drop components are available in the Component Dev Kit (CDK) package.

Angular 9|8|7 Drag and Drop Across Multi Lists in Angular Material , Using these components, you can create flexible, robust, and further ado, let us begin creating Angular Drag and Drop tutorial from the beginning. Step 2: Configure Angular Material 8 CDK Drag and Drop in Angular App. Get Started with Drag and Drop using Angular 7. To work with Drag and Drop, we have the module called @angular/cdk/drag-drop which is used to provide the interface to create drag and drop functionality easily. A number of options are available with Drag and Drop as listed below. Basic Drag and Drop.

Comments
  • Working example Angular drag n drop freakyjolly.com/…
  • Thank you. This is coming fine for single drag block, if I want multiple like [cdkDropListConnectedTo]="[list-2,list-3,list-4] is not working. how to achive that
  • @JomyJoseph I've updated the answer to include support for linking between multiple lists. If this solves your issue, please accept the answer. If not, let us know.
  • Sure. You are rock. I missed single quote for each id.
  • in angular 7.2.1 i had to use [] around cdkDropListConnectedTo to work even with one list. [cdkDropListConnectedTo]="[list-1]" or [cdkDropListConnectedTo]="['list-1']"
  • @Dirk tested it with angular 7.2.0 and angular material/cdk 7.2.1 and it worked using the same syntax as before: cdkDropListConnectedTo="list-1"
  • What is your implementation, can you provide sample cause I am facing this problem now and without connectedTo it does'nt work. I have component with list where drag-drop is implemented and I want to use it in such group.
  • Saved the day!!