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>