import { Component , Input } from "@angular/core" ; import { SkyhookDndService } from "@angular-skyhook/core" ; @ Component ( { selector : 'app-trash-pile' , template : `
    <ng-container *ngIf="collected$|async as c">
      <p>
        <button (click)="litter($event)">add more</button> <span>({{remain}} left)</span>
      </p>
      <div [dragSource]="trashSource" [class.dragging]="c.isDragging && remain > 1">
        <app-trash
            [type]="type"
            [empty]="remain == 0 || c.isDragging && remain == 1"> </app-trash>
      </div>
    </ng-container>
  ` , styles : [ `
  .dragging {
  }
  ` ] } ) export class TrashPile { @ Input ( ) type : string ; remain = 5 ; count = 0 ; trashSource = this . dnd . dragSource ( null , { canDrag : ( monitor ) => this . remain > 0 , beginDrag : ( monitor ) => { return { count : this . count ++ } ; } , endDrag : ( monitor ) => { if ( monitor . didDrop ( ) ) { this . remain -- ; } } } ) ; isDragging$ = this . trashSource . listen ( m => m . isDragging ( ) ) ; collected$ = this . trashSource . listen ( monitor => ( { isDragging : monitor . isDragging ( ) , canDrag : monitor . canDrag ( ) , itemType : monitor . getItemType ( ) } ) ) ; constructor ( private dnd ) { } ngOnChanges ( ) { this . trashSource . setType ( this . type ) ; } ngOnDestroy ( ) { this . trashSource . unsubscribe ( ) ; } litter ( ) { this . remain += 5 ; } }