How to set the Width and Height of a Mat Dialog in Angular?

To set the width and height of a mat dialog in angular you have to pass the width and height inside the matDialogConfig object while calling the mat dialog in the ts file.

See the following example:

const dialogRef = this.dialog.open(MyDialogComponent,{
  width:'600px',   // Set width to 600px
  height:'350px',  // Set height to 530px
});

You can also set the width and height in dynamic units such as % and viewport units(vw & vh).

See this example:

const dialogRef = this.dialog.open(MyDialogComponent,{
  width:'60vw',   // Set width to 60 percent of view port width
  height:'55vh',  // Set height to 55 percent of view port height
});

Similarly, you can specify the width and height in %. The % width and height will be calculated based on the total width and height of the browser window.

See this example:

const dialogRef = this.dialog.open(MyDialogComponent,{
  width:'60%',   // Set width to 60%  of the window's total width
  height:'50%',  // Set height to 50% of the window's total height
});