Angular Material CDK Drop Event not fireing

Question

I'm trying to use Angular material to drag drop a free node. It's not part of a list but I would like to know when the item has been dropped. I'm not sure how I can bind to this event.

I simply want to know when the node has been dropped.

here is my code so far:

    <svg id="svgCanvas" >

    <g *ngFor="let link of linkPaths">
        <path [attr.d]="link"></path>
    </g>

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius"
            (click)="nodeClick($event)"  (dragEnd)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>

</svg>

I want the dragEnd event to fire and call my drop function in the component's code.

private drop(event) {
   console.log('drag end')
}

The click event seems to work but the drop won't fire.

I can see that Lists support the drop feature but I am not using my drag drop for a list. These are free moving nodes.

Answer 1

Use the (cdkDragEnded) event (cdkDragEnded)="drop($event, node)".

https://material.angular.io/cdk/drag-drop/api

Stackblitz: https://stackblitz.com/edit/angular-fk9wpa

<div class="example-box" (cdkDragEnded)="drop($event)" cdkDrag>
  Contents of dragable element
</div>

In your case:

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius" (click)="nodeClick($event)" (cdkDragEnded)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>