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>

Answer 2

I was able to use dario's answer by combining with Supervision's suggestion. For clarity, result was a dialog, draggable via the title.

HTML as follows:

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane">

    <h2 mat-dialog-title cdkDragHandle>Title Here</h2>

    <mat-dialog-content>
    ... Content here
    </mat-dialog-content>

    <mat-dialog-actions>
    ... Actions here
    </mat-dialog-actions>
</div>