By default, a mat dialog opens up in the center of the window. However, we can very easily change the position of the mat dialog and open it up anywhere inside the window.
To change the position of a mat dialog you can call the updatePosition() method of the MatDialogRef object.
The updatePosition() method takes in an object as parameter where you can directly specify the position of the mat dialog using the top, left, bottom and right properties.
For example, if you want open up the mat dialog in the bottom right corner, you can simply set the bottom and right properties to ‘0px’.
Here is how you can do it:
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'600px',
height:'350px',
});
dialogRef.updatePosition({
bottom: '0px', // Set bottom position
right: '0px' // Set right position
});
Similarly, if you want to open up the mat dialog in the top left corner, you can simply set the top and left properties to ‘0px’.
See this example:
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'600px',
height:'350px',
});
dialogRef.updatePosition({
left: '0px', // Set left position
top: '0px' // Set top position
});
You can also specify non-zero values to open up the mat dialog at any desired position.
The following example opens up the mat dialog at a position 50px away from the right and 100px away from the top of the window.
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'600px',
height:'350px',
});
dialogRef.updatePosition({
right: '50px', // Set right position
top: '100px' // Set top position
});
