I'm working on a project which uses Angular's cdk-drag-and-drop functionality to be able to sort a grid of cards. Because it's a grid, I'm using this StackBlitz as an example. The example does exactly what I want to achieve.
There is a slight difference however with my app. In my situation, the grid itself and all the items on the grid (cards) are separate Angular components. This means I have the following two HTML's..
The grid HTML:
<div class="example-container" cdkDropListGroup>
<div cdkDropList [cdkDropListEnterPredicate]="dropListEnterPredicate" (cdkDropListDropped)="dropListDropped($event)"></div>
<div cdkDropList *ngFor="let card of cards" [cdkDropListEnterPredicate]="dropListEnterPredicate" (cdkDropListDropped)="dropListDropped($event)">
<my-card-component [card]="card" etc..></my-custom-component>
</div>
</div>And the HTML for each individual card in the grid ('my-card-component'):
<div class="card" cdkDrag (cdkDragMoved)="dragMoved($event)">
<!-- A lot more html -->
<div cdkDragHandle>Drag me</div>
</div>However, this doesn't give the desired effect. Then, when I move the HTML for the card back into it's parent component HTML file (so, the grid) it actually does work. So apparently, using the cdk directives across multiple components doesn't work. Is this expected behaviour? Or should it work across multiple components?
I've tried adding the cdkDrag-directive onto the my-card-component html-element, because that would keep that directive in the grid component. This makes the card draggable, but I can't drop it anywhere. Also, it makes the entire card draggable and thus seems to ignore the cdkDragHandle in the child component. So this didn't bring me any further.
Preferably, I would keep the separation of components and still use the cdk's directives. Is this possible?
