Comment puis-je positionner le module Position MatSnackBar dans Angular?

Question

J'essaie de positionner le module MatSnackbar pour qu'il apparaisse en haut de ma page.

J'ai essayé d'utiliser config pour ajouter customclass. Voici mon code:

component.ts

let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);

. css

.red-snackbar{
    position: absolute !important;
    top: 54px;
}

Mais ça ne fonctionne pas. Est-il possible de repositionner le MatSnackbar?

Answer 1

Vous pouvez déterminer le verticalPosition: MatSnackBarVerticalPosition comme spécifié par docs

ts:

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      // here specify the position
      verticalPosition: 'top'
    });
}

Démo