import { Component, NgModule } from '@angular/core';
import { DragAndDropModule } from 'angular-draggable-droppable';

@NgModule({
  declarations: [DemoApp],
  imports: [DragAndDropModule.forRoot()],
  bootstrap: [DemoApp]
})
class DemoModule {}

@Component({
  selector: 'demo-app',
  template: `
    <div mwlDraggable (dragEnd)="dragEnd($event)">Drag me!</div>
    <div
      mwlDroppable
      (drop)="this.droppedData = $event.dropData">
      <span [hidden]="droppedData">Drop here</span>
      <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
    </div>
  `
})
class DemoApp {
  droppedData: string;

  dragEnd(event) {
    console.log('Element was dragged', event);
  }
}