Issue
looking for a way to be able to make a mat-dialog both draggable and resizeable. So far I have the draggable part done already using cdkDrag (DragDropModule). I have tried using resize: booth; in css but it seems as it isn’t working well with combined with draggable functionality. I.e. if i remove the cdk the resizable works and vice versa.
See code here: https://stackblitz.com/edit/angular-vp8xt7
Solution
In your StackBlitz
, a resize handle appears bottom right of the dialog, hence you’re almost there. The problem is that mouse events are consumed by the dragging functionality and not handed over to the resizing functionality.
Adding a cdkDragHandle
to the h1
element solves your problem.
<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
Shee how it workes on your forked StackBlitz.