how to open Md-dialog full screen angular4?

Question

I am trying to pass some property value using config. But dialog not open into full screen.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

How can I open dialog full screen based on resolution?

Answer 1

This work for me

let dialogRef = this.dialog.open(CustomerGarageAddEditComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '100%',
      width: '100%'
    });

Source

https://github.com/angular/material2/issues/9823

Answer 2

You can add a panelClass to the dialog and then apply whatever css just to that specific dialog.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
    panelClass: 'full-screen-modal',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

Create class:

.full-screen-modal .mat-dialog-container {
  max-width: none;
}