Make Angular dialog draggable only by title

Question

I've already done this:

<div mat-dialog-title
     cdkDrag
     cdkDragRootElement=".cdk-overlay-pane"
     cdkDragHandle>
</div>

But the solution causes the dialog to be draggable by clicking any place of the window which makes impossible to extend <textarea> within the content block. Ideally I need a way to make it draggable only by clicking the title.

Answer 1

Set cdkDrag on the element you want to be draggable. Remove cdkDragRootElement since it is not necessary. Leave the cdkDragHandle where it is and it should work.

 <mat-card cdkDrag>
  <mat-card-header cdkDragHandle>
   Text
  </mat-card-header>
 </mat-card>