Q:

Angular Material 2 : How to overwrite Dialog max-width to 100vw?

I am trying to create 100% width Dialog. But As the original settings, it is restricted to 80vw. 
.mat-dialog-container{
  max-width:80vw;
}

I have tried following ways to overwrite this value. But they weren't successful. 
.mat-dialog-container {
  max-width: none;
  width: 100vw;
  height: 100vh;
}

And 
.mat-dialog-container {
    max-width: none !important;
}

Someone please advise me how to overwrite 80vw to 100vw. Thank you.

A:

Add a css class in your global styles.css e.g.
.full-width-dialog .mat-dialog-container {
  max-width: 100vw !important;
}

.. then provide the panelClass to your dialog: 
this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'})

Read this documentation.

A:

Try to use the property name directly as below:
this.dialog.open(MyDialogComponent, {maxWidth: '100vw !important'});

This works for me in Angular 7.

A:

Easiest way to solve this:
const dialogRef = this.dialog.open(MyDialogComponent, {
        width: '100vw',
        maxWidth: '100vw',
    }
)

