Angular 5 Material Snackbar panelClass config

Question

J'essaie d'ajouter un panelClass à la configuration Matière angulaire Snackbar .

J'ai écrit le code suivant, en suivant les documentations des sites officiels.

import { Component, OnInit } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
import { Location } from '@angular/common';

@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
  styleUrls: ['./snack-bar-component-example.css']
})
export class SnackBarComponentExample implements OnInit {

  constructor(public snackBar: MatSnackBar) { }

  ngOnInit() {
  }

  saveButtonClick = () =>{
    this.snackBar.open("This is a message!", "ACTION", {
      duration: 3000,
      panelClass: ["font-family:'Open Sans', sans-serif;"]
    });
  }
}

J'ai déjà lié l'événement au bouton HTML. Lorsque j'enlève le bouton HTML, j'enlève le bouton HTML. panelClass alors la configuration de la durée fonctionne bien. J'importe une police Google (Open Sans) et j'essaie de l'appliquer à la Snackbar. Cependant, je reçois une erreur :

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('font-family:'Open Sans', sans-serif;') contains HTML space characters, which are not valid in tokens.

Peut-être ne suis-je pas en mesure de comprendre comment utiliser la fonction panelClass . Même lorsque j'essaie d'ajouter ceci,

panelClass: ["color:white;"];

L'erreur persiste :

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.

Comment puis-je corriger cette erreur et faire fonctionner les choses ? Merci de m'aider.

PS : Je suis conscient du fait que la extraClasses config. Mais je ne veux pas l'utiliser car il est écrit dans la documentation qu'elle sera bientôt obsolète.

PPS : : Cela fonctionne bien avec la configuration de la durée.

Answer 1

Dans votre composant SnackBarComponentExample, essayez :

saveButtonClick = () =>{
  let config = new MatSnackBarConfig();
  config.duration = 5000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("This is a message!", "ACTION", config);
}

Où 'red-snackbar' est une classe de votre application principale styles.css fichier. Curieusement, je n'ai pas réussi à obtenir le config.panelClass fonctionnait lorsque je faisais référence au fichier css associé à mes composants, mais une fois que j'ai placé la classe dans le fichier principal styles.css mes styles ont été appliqués correctement au snackBar.

Answer 2

Dans mon cas, tout ce qui précède ne fonctionne pas. Cela commence à fonctionner lorsque j'ajoute !important en css :

.error-snackbar {
  background-color: fuchsia !important;
}

Answer 3

PanelClass est défini comme suit

panelClass : string | string[]

Classes CSS supplémentaires à ajouter au conteneur du snack-bar.

Il est utilisé pour ajouter une classe, pas un style.

Imaginez la taille du tableau si vous deviez y intégrer des styles css complexes.

Vous devez donc définir votre style dans un fichier css et c'est seulement ensuite que vous pouvez appliquer une classe à la barre :

panelClass: ['first-class', 'second-class'];

Answer 4

Dans angular 7, l'utilisation de ::ng-deep devant la classe a fonctionné pour moi.

::ng-deep  .snackBar-fail {
    color: #ffffff !important;
    background-color: #cc3333 !important;
}