How to disable CDK Drop due to condition

Question

I'm trying to find a way how to disable dropping by using CDK due to some conditions.If the list which I wanna drop is empty should be disabled.I couldn't find a way to do that inside a method in .ts file.There are some HTML directives for that but not useful for me.

if(event.container.data.length==1){
  event.previousContainer.disabled=true;
}

I found this .disabled method for dragged containers but it only works when I Drag.I need an event to drop.

https://stackblitz.com/edit/angular-ui7u9m?file=src/app/cdk-drag-drop-disabled-sorting-example.ts

In this stackblitz example,there are two lists for example when Avilable lists is empty(no elements in array),dropping shouldnt be allowed anymore to this list.Could you help me to do that?

Answer 1

You can use the Angular Material enterPredicate from CdkDropList (Docs)

@Input('cdkDropListEnterPredicate')

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.

E.g.:

html:

<div
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListEnterPredicate]="canDrop">
      <div class="example-box" *ngFor="let item of basket" cdkDrag>{{item}}</div>
    </div>

component:

  canDrop() {
    return this.basket && this.basket.length > 0;
  }

Check attached Stackblitz.

Edit 1:

Additional you can use the attached list where your dropped too:

  canDrop(item: CdkDrag, list: CdkDropList) {    
    console.log(list.getSortedItems().length)
    return list && list.getSortedItems().length && list.getSortedItems().length > 0;
  }

Edit 2:

You can overwrite the function to pass in a parameter:

...
[cdkDropListEnterPredicate]="dropListEnterPredicate(basket)">
...

  dropListEnterPredicate(list: []){
    return function(drag: CdkDrag, drop: CdkDropList) {
        return list.length > 0;
    };