Angular Material Snackbar is helpful for displaying information to users about API success or failure, among other things.
The general syntax for using the Snackbar is:
import { MatSnackBar } from '@angular/material/snack-bar';
constructor(private _snackBar: MatSnackBar) {}
this._snackBar.open(message, action, configuration)
If we want to change the color of the text, for example, to display an API failure message in red, we can pass a custom class through the configuration object using the panelClass property:
this._snackBar.open('Something went wrong!!!', '', { panelClass: "error-api", duration: 5000 })
An important point to note is that the panel class should be defined in the global stylesheet, such as Style.css, Style.scss or Style.sass.
Here's an example of defining the .error-api class in Style.css:
.error-api {
--mdc-snackbar-supporting-text-color: #f44336;
}
Top comments (1)
thanks @orahul1