cdkDragHandle doesn't work inside child component
This solution worked for me:
Parent Component:
<div cdkDropList #list="cdkDropList"
[cdkDropListData]="myArray"
(cdkDropListDropped)="drop($event)">
<app-item
*ngFor="let item of myArray"
cdkDrag>
<div cdkDragHandle></div>
</app-item>
</div>
Child Component (app-item):
<div class="drag-container">
<ng-content></ng-content>
<div class="drag-handle">drag here</div>
</div>
Then style the cdk-drag-handle class in the parent component. cdk-drag-handle comes with material, so we do not need to apply it manually:
.cdk-drag-handle {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background-color: transparent;
cursor: move;
}
Then style the drag-container with position: relative and whatever you want. I have an item inside it (drag-handle) which also takes the full width and height of the container, that contains an image (just as a sidenote).
This worked for me: Instead of using cdkDragHandle, just stop mouse down event propagation as bellow. Then only header can be dragged.
<div>
<header></header>
<body (mousedown)="$event.stopPropagation()"></body>
</div>