Drag and Drop with lists in different components - Angular cdk

Question

I had an example working using the several cdkDropList elements in the same component, however I refactored the code and noticed that moving them to different components my example stopped work.

Here is a small demo: https://stackblitz.com/edit/angular-cdk-drag-drop-wkpqst

If you try to move an element from the "To Do" list into the "Done", you can see that the list is not highlighted with a blue border as it was supposed.

Do lists need to be all in the same component, i.e. same scope?

Answer 1

You may use properties id and cdkDropListConnectedTo to link both lists

Answer 2

I was fighting this issue myself and your stackblitz and rafi's comment got me close

I played with your stackblitz and got it working!

just change:

[cdkDropListConnectedTo]="[todoList]"

to

cdkDropListConnectedTo="todoList"

on both sides these brackets need to be removed and in both components and it started working!

Thanks to both of you for getting me close enough to solve this issue!

BIG PS: Another great looking solution can be found here: Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

Answer 3

I don't have enough reputation to comment on @okThen's answer and would like to correct it. The right way was pretty close, but here's a working example and some explanation:

<component1 [id]="'todoList'" [cdkDropListConnectedTo]="'todoList'">
</component1>

Mind the '', because we provide input to a component. Please refer to a previous answer of mine for more details.