Angular 8 中的可拖动和可调整大小的垫子对话框

Question

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. Ie if i remove the cdk the resizable works and vice versa.

See code here: https://stackblitz.com/edit/angular-vp8xt7

Answer 1

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 .

Answer 2

For resizeable mat dialog component:

use css for panel class like this..

.custom-mat-dialog-panel .mat-dialog-container { 
  resize: both;
}

ts file:

openDialog() {
    this.dialog.open(HelloComponent,{height:'100px',width:'100px', panelClass: 'custom-mat-dialog-panel'});
}

For draggable mat dialog component:

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