comment ouvrir Md-dialog en plein écran angular4?

Question

J'essaie de transmettre une valeur de propriété en utilisant config. Mais le dialogue ne s'ouvre pas en plein écran.

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

Comment puis-je ouvrir la boîte de dialogue en plein écran en fonction de la résolution?

Answer 1

Vous pouvez ajouter une panelClass à la boîte de dialogue, puis appliquer les CSS à cette boîte de dialogue spécifique.

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);
}

Créer une classe:

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

Answer 2

Ce travail pour moi

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

La source 

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