Search code examples
angulardrag-and-dropangular-materialangular-cdk

Angular Material: Remove item onDrop outside cdk component

I am currently using angular material CDK DragAnDrop for some list functionalities.
What I'm trying to accomplish is:

  • I drag an element from List A and drop it into List B. If I drag the element from List B and drop it outside List B (outside List A also) I would like to remove the element from List B.

  • Is there some directive or api that I can use to validate that I'm dropping an element outside cdkDropList component?

Solution

  • Is there some directive or api that I can use to validate that I'm dropping an element outside cdkDropList component?

    You may use the isPointerOverContainer property of CdkDragDrop event.

    If the item is dropped outside a container, it will be set to false, otherwise true.