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?