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
});
