DEV Community

Cover image for How to change angular material MatSnackBar color
Rahul Raveendran
Rahul Raveendran

Posted on • Edited on

1

How to change angular material MatSnackBar color

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
rahulbenzeen profile image
RahulBenzeen

thanks @orahul1

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay