How to make Angular Material Dialog re sizable in Angular 7?

Question

I am using angular material dialog and AngularJS 7. I am able to drag the dialog but I want to make that dialog re sizable so that used can

Answer 1

From my experience, you can overwrite max-width properties of overlay wrapper, dialog container and define resize. You should end with something like that:

.cdk-overlay-pane{
  width: unset !important;
  height: unset !important;
  max-width: 100% !important;
}

.mat-dialog-container{
  max-width: 100%;
  max-height: 100% !important;
  resize: both;
}

Tried to reproduce it: https://stackblitz.com/edit/angular-material-dialog-resize-vbom8f?file=src%2Fstyles.css

Works, but only with !important statement. Try to play with your code to find a workaround to not use it. I'm sure you know, that !important isn't the best CSS practice.

Answer 2

I managed to solve your problem, as can be seen in the code below:

import { Component, Input , OnInit} from '@angular/core';
import {MatDialogRef} from '@angular/material';
import {HostListener } from '@angular/core'

@Component({
  selector: 'hello',
  template: `
  <div id='chat' [style.top.px]='y'  
                 [style.left.px]='x' 
                 [style.width.px]='width'
                 [style.height.px]='height'
                 (mousedown)='onWindowPress($event)'
                 (mousemove)='onWindowDrag($event)'>
        <div (mousedown)='onCornerClick($event, topLeftResize)' id='chat-top-left-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, topRightResize)' id='chat-top-right-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, bottomLeftResize)' id='chat-bottom-left-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, bottomRightResize)' id='chat-bottom-right-resize' class='chat-corner-resize'></div>
    </div>
  `,
  styles: [`#chat {
            background-color: white;
            opacity: 0.8;
        }   
        .chat-corner-resize {

            width: 10px;
            height: 10px;
        }
        #chat-top-left-resize { top: 0px; left: 0px; }
        #chat-top-right-resize { top: 0px; right: 0px; }
        #chat-bottom-left-resize { bottom: 0px; left: 0px; }
        #chat-bottom-right-resize { bottom: 0px; right: 0px; }`]
})
export class HelloComponent  implements OnInit{
  @Input() name: string;
  x: number;
  y: number;
  px: number;
  py: number;
  width: number;
  height: number;
  minArea: number;
  draggingCorner: boolean;
  draggingWindow: boolean;
  resizer: Function;
  constructor(public dialogRef: MatDialogRef<HelloComponent>){
    this.x = 0;
    this.y = 0;
    this.px = 0;
    this.py = 0;
    this.width = 300;
    this.height = 150; 
    this.draggingCorner = false;
    this.draggingWindow = false;
    this.minArea = 200
  }

  ngOnInit(){

  }
    area() {
    return this.width * this.height;
  }

  onWindowPress(event: MouseEvent) {
    this.draggingWindow = true;
    this.px = event.clientX;
    this.py = event.clientY;
  }

  onWindowDrag(event: MouseEvent) {
     if (!this.draggingWindow) {
        return;
    }
    let offsetX = event.clientX - this.px;
    let offsetY = event.clientY - this.py;

    this.x += offsetX;
    this.y += offsetY;
    this.px = event.clientX;
    this.py = event.clientY;
  }

  topLeftResize(offsetX: number, offsetY: number) {
    this.x += offsetX;
    this.y += offsetY;
    this.width -= offsetX;
    this.height -= offsetY;
  }

  topRightResize(offsetX: number, offsetY: number) {
    this.y += offsetY;
    this.width += offsetX;
    this.height -= offsetY;
  }

  bottomLeftResize(offsetX: number, offsetY: number) {
    this.x += offsetX;
    this.width -= offsetX;
    this.height += offsetY;
  }

  bottomRightResize(offsetX: number, offsetY: number) {
    this.width += offsetX;
    this.height += offsetY;
  }

  onCornerClick(event: MouseEvent, resizer?: Function) {
    this.draggingCorner = true;
    this.px = event.clientX;
    this.py = event.clientY;
    this.resizer = resizer;
    event.preventDefault();
    event.stopPropagation();
  }

  @HostListener('document:mousemove', ['$event'])
  onCornerMove(event: MouseEvent) {
    if (!this.draggingCorner) {
        return;
    }
    let offsetX = event.clientX - this.px;
    let offsetY = event.clientY - this.py;

    let lastX = this.x;
    let lastY = this.y;
    let pWidth = this.width;
    let pHeight = this.height;

    this.resizer(offsetX, offsetY);
    if (this.area() < this.minArea) {
        this.x = lastX;
        this.y = lastY;
        this.width = pWidth;
        this.height = pHeight;
    }
    this.px = event.clientX;
    this.py = event.clientY;
  }

  @HostListener('document:mouseup', ['$event'])
  onCornerRelease(event: MouseEvent) {
    this.draggingWindow = false;
    this.draggingCorner = false;
  }
}


app.component.ts

import { Component } from '@angular/core';
import {MatDialog} from '@angular/material';
import {HelloComponent} from './hello.component';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private dialog:MatDialog){

  }

  openDialog(){
    this.dialog.open(HelloComponent);
  }
}

app.component.html

<button type="button" (click)="openDialog()">Open</button>

style.css

.mat-dialog-container{
          padding:0px!important;
        }

Let me know if this solves your problem!!