I Cannot Get Dropped Event to Work in WebStorm Angular Material Project

Question

While I have been programming since 1991 (yes I am THAT old), this is my first dive into Angular and I am attempting to use WebStorm 2021.2.3 to create a frontend restful interface. The end result, eventually, will be draggable images of desktop/server icons with a menu on each that enables additional actions along with lines representing connections between all of them. All based on a JSON object passed back and forth between my working restful middleware and this Angular frontend.

Of course, I cannot even get the basics working - so there is that.

I currently have the following code:

 import {Component} from '@angular/core'; import {CdkDragExit} from '@angular/cdk/drag-drop'; @Component({ selector: 'app-device-component', templateUrl: './device-component.component.html', styleUrls: ['./device-component.component.css'] }) export class DeviceComponentComponent { exited(event: CdkDragExit<string[]>) { console.log('Exited', event.item.data); } }

As well as this for my component frontend

 <div class="example-box" cdkDrag (cdkDragExited)="exited($event)"> <mat-card class="example-card"> <mat-card-header> </mat-card-header> <img mat-card-image src="https://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Desktop-Windows-icon.png" alt="Windows 10"> <mat-card-content> Windows 10 Machine <br /> Location 192.168.1.1 </mat-card-content> <mat-card-actions> </mat-card-actions> </mat-card> </div>

The main app.module.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatNativeDateModule} from '@angular/material/core'; import {HttpClientModule} from '@angular/common/http'; import {AppComponent} from "./app.component"; import {DeviceComponentComponent} from "./device-component/device-component.component"; import {MatCardModule} from "@angular/material/card"; import { DragDropModule } from '@angular/cdk/drag-drop'; import {MatDialogModule} from "@angular/material/dialog"; /* the AppModule class with the @NgModule decorator */ @NgModule({ declarations: [ AppComponent, DeviceComponentComponent ], imports: [ BrowserAnimationsModule, BrowserAnimationsModule, BrowserModule, FormsModule, HttpClientModule, MatNativeDateModule, ReactiveFormsModule, MatCardModule, MatDialogModule, DragDropModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

And my crazy advanced main app

 <div class="content" role="main"> <app-device-component></app-device-component> </div>

When I launch this component using npm run start in the Terminal window, I can drag the card around all day long but I never get the console output.

Can somebody PLEASE help me out here?

Answer 1

As you can see in the official doc you need containers (using CdkDropList directive) in order to trigger the cdkDragExited event listener. For your case I would suggest to use the cdkDragMoved event listener.