Angular mat dialog full screen toggle

I'm working on an Angular application where I have a dialog that displays some JSON data. I want to add a button to toggle this dialog to full screen. I tried setting a panel class and then removing it when toggled, but I couldn't achieve the desired functionality.

As a workaround, I'm currently closing the existing dialog and opening a new one with full screen dimensions (width, maxWidth, height, maxHeight) when the button is clicked. This workaround works, but I feel it is not the most efficient solution.

Here is what I'm currently doing:

openDialog() {
this.dialogRef = this.dialog.open(MyDialogComponent, {
width: '80%',
height: '80%',
data: this.jsonData
});
}

toggleFullScreen() {
this.dialogRef.close();
this.dialogRef = this.dialog.open(MyDialogComponent, {
width: '100vw',
height: '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
data: this.jsonData
});
}

Continue reading...