Snack Bar
A custom snack bar service built on top of Angular Material's snack bar component. Inject MatSnackBarService and call success() or error() to surface themed, dismissible notifications.
Overview
Inject MatSnackBarService in your component, then call one of its methods to show a snack bar:
success('YOUR MESSAGE')— show a success (green) snack bar.error('YOUR MESSAGE')— show an error (red) snack bar.open('YOUR MESSAGE')— show a generic snack bar with a Close action.
The service is providedIn: 'root', so it is available everywhere without extra wiring. Each method accepts an optional options object to override the duration, horizontalPosition, verticalPosition, and panelClass. By default snack bars appear at the top-right and dismiss after 5 seconds.
API
Service
MatSnackBarService (providedIn: 'root')
Methods
| Name | Signature | Description |
|---|---|---|
success | (message: string, options?: MatSnackBarOptions) => void | Opens a success snack bar (success-snackbar panel class) |
error | (message: string, options?: MatSnackBarOptions) => void | Opens an error snack bar (error-snackbar panel class) |
open | (message: string) => void | Opens a generic snack bar with a Close action |
Configuration properties
| Name | Type | Default | Description |
|---|---|---|---|
duration | number | 5000 | Time in milliseconds the snack bar stays open |
horizontalPosition | MatSnackBarHorizontalPosition | 'right' | Horizontal position of the snack bar |
verticalPosition | MatSnackBarVerticalPosition | 'top' | Vertical position of the snack bar |
MatSnackBarOptions
| Name | Type | Description |
|---|---|---|
duration | number | Override the open duration for this call |
horizontalPosition | MatSnackBarHorizontalPosition | Override the horizontal position |
verticalPosition | MatSnackBarVerticalPosition | Override the vertical position |
panelClass | string | string[] | Custom panel class(es) for styling |
Built-in panel classes include success-snackbar, error-snackbar, light-success-snackbar, light-error-snackbar, primary-snackbar, info-snackbar, and warning-snackbar.