Overview for snack-bar
MatSnackBar
is a service for displaying snack-bar notifications.
Opening a snackbar
A snackbar can contain either a string message or a given component.
// Simple message.
let snackBarRef = snackBar.open('Message archived');
// Simple message with an action.
let snackBarRef = snackBar.open('Message archived', 'Undo');
// Load the given component into the snackbar.
let snackBarRef = snackBar.openFromComponent(MessageArchivedComponent);
In either case, a MatSnackBarRef
is returned. This can be used to dismiss the snackbar or to
receive notification of when the snackbar is dismissed. For simple messages with an action, the
MatSnackBarRef
exposes an observable for when the action is triggered.
If you want to close a custom snackbar that was opened via openFromComponent
, from within the
component itself, you can inject the MatSnackBarRef
.
snackBarRef.afterDismissed().subscribe(() => {
console.log('The snackbar was dismissed');
});
snackBarRef.onAction().subscribe(() => {
console.log('The snackbar action was triggered!');
});
snackBarRef.dismiss();
Dismissal
A snackbar can be dismissed manually by calling the dismiss
method on the MatSnackBarRef
returned from the call to open
.
Only one snackbar can ever be opened at one time. If a new snackbar is opened while a previous message is still showing, the older message will be automatically dismissed.
A snackbar can also be given a duration via the optional configuration object:
snackBar.open('Message archived', 'Undo', {
duration: 3000
});
Sharing data with a custom snackbar
You can share data with the custom snackbar, that you opened via the openFromComponent
method,
by passing it through the data
property.
snackBar.openFromComponent(MessageArchivedComponent, {
data: 'some data'
});
To access the data in your component, you have to use the MAT_SNACK_BAR_DATA
injection token:
import {Component, Inject} from '@angular/core';
import {MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
@Component({
selector: 'your-snackbar',
template: 'passed in {{ data }}',
})
export class MessageArchivedComponent {
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: string) { }
}
Annotating custom snackbar content
When opening a custom snackbar via the snackBar.openFromComponent
method, you can use the
following directives to annotate the content and ensure that it is styled consistently compared to
snackbars opened via snackBar.open
.
matSnackBarLabel
- Marks the text of the snackbar shown to usersmatSnackBarActions
- Marks the container element containing any action buttonsmatSnackBarAction
- Marks an individual action button
If no annotations are used, all the content will be treated as text content.
Setting the global configuration defaults
If you want to override the default snack bar options, you can do so using the
MAT_SNACK_BAR_DEFAULT_OPTIONS
injection token.
@NgModule({
providers: [
{provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
]
})
Accessibility
MatSnackBar
announces messages via an aria-live
region. While announcements use the polite
setting by default, you can customize this by setting the politeness
property of
MatSnackBarConfig
.
MatSnackBar
does not move focus to the snackbar element. Moving focus like this would disrupt
users in the middle of a workflow. For any action offered in the snackbar, your application should
provide an alternative way to perform the action. Alternative interactions are typically keyboard
shortcuts or menu options. You should dismiss the snackbar once the user performs its corresponding
action. A snackbar can contain a single action with an additional optional "dismiss" or "cancel"
action.
Avoid setting a duration
for snackbars that have an action available, as screen reader users may
want to navigate to the snackbar element to activate the action. If the user has manually moved
their focus within the snackbar, you should return focus somewhere that makes sense in the context
of the user's workflow.