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

Easiest way to solve this:

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

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.

Related