API reference for Angular Material snack-bar
import {MatSnackBarModule} from '@angular/material/snack-bar';
Services
MatSnackBar
Service to dispatch Material Design snack bar messages.
Properties
Name | Description |
---|---|
|
The CSS class to apply for handset mode. |
|
The component that should be rendered as the snack bar's simple component. |
|
The container component that attaches the provided template or component. |
Methods
dismiss | |
---|---|
Dismisses the currently-visible snack bar. |
open | |
---|---|
Opens a snackbar with a message and an optional action. |
|
Parameters | |
message string
|
The message to show in the snackbar. |
action string = ''
|
The label for the snackbar action. |
config? MatSnackBarConfig<any>
|
Additional configuration options for the snackbar. |
Returns | |
MatSnackBarRef<TextOnlySnackBar>
|
|
openFromComponent | |
---|---|
Creates and dispatches a snack bar with a custom component for the content, removing any currently opened snack bars. |
|
Parameters | |
component ComponentType<T>
|
Component to be instantiated. |
config? MatSnackBarConfig<D>
|
Extra configuration for the snack bar. |
Returns | |
MatSnackBarRef<T>
|
|
openFromTemplate | |
---|---|
Creates and dispatches a snack bar with a custom template for the content, removing any currently opened snack bars. |
|
Parameters | |
template TemplateRef<any>
|
Template to be instantiated. |
config? MatSnackBarConfig<any>
|
Extra configuration for the snack bar. |
Returns | |
MatSnackBarRef<EmbeddedViewRef<any>>
|
|
Directives
SimpleSnackBar
Selector: simple-snack-bar
Exported as: matSnackBarProperties
Name | Description |
---|---|
|
|
|
If the action button should be shown. |
|
Methods
action | |
---|---|
Performs the action on the snack bar. |
MatSnackBarLabel
Directive that should be applied to the text element to be rendered in the snack bar.
Selector: [matSnackBarLabel]
MatSnackBarActions
Directive that should be applied to the element containing the snack bar's action buttons.
Selector: [matSnackBarActions]
MatSnackBarAction
Directive that should be applied to each of the snack bar's action buttons.
Selector: [matSnackBarAction]
Classes
MatSnackBarConfig
Configuration used when opening a snack-bar.
Properties
Name | Description |
---|---|
|
Message to be announced by the LiveAnnouncer. When opening a snackbar without a custom component or template, the announcement message will default to the specified message. |
|
Data being injected into the child component. |
|
Text layout direction for the snack bar. |
|
The length of time in milliseconds to wait before automatically dismissing the snack bar. |
|
The horizontal position to place the snack bar. |
|
Extra CSS classes to be added to the snack bar container. |
|
The politeness level for the MatAriaLiveAnnouncer announcement. |
|
The vertical position to place the snack bar. |
|
The view container that serves as the parent for the snackbar for the purposes of dependency injection. Note: this does not affect where the snackbar is inserted in the DOM. |
MatSnackBarRef
Reference to a snack bar dispatched from the snack bar service.
Properties
Name | Description |
---|---|
|
The instance of the component making up the content of the snack bar. |
Methods
afterDismissed | |
---|---|
Gets an observable that is notified when the snack bar is finished closing. |
|
Returns | |
Observable<MatSnackBarDismiss>
|
|
afterOpened | |
---|---|
Gets an observable that is notified when the snack bar has opened and appeared. |
|
Returns | |
Observable<void>
|
|
dismiss | |
---|---|
Dismisses the snack bar. |
dismissWithAction | |
---|---|
Marks the snackbar action clicked. |
onAction | |
---|---|
Gets an observable that is notified when the snack bar action is called. |
|
Returns | |
Observable<void>
|
|
Deprecated
closeWithAction
|
|
---|---|
Marks the snackbar action clicked. |
Interfaces
TextOnlySnackBar
Interface for a simple snack bar component that has a message and a single action.
Properties
Name | Description |
---|---|
|
|
|
|
|
|
|
MatSnackBarDismiss
Event that is emitted when a snack bar is dismissed.
Properties
Name | Description |
---|---|
|
Whether the snack bar was dismissed using the action button. |
Type aliases
MatSnackBarHorizontalPosition
Possible values for horizontalPosition on MatSnackBarConfig.
type MatSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right';
MatSnackBarVerticalPosition
Possible values for verticalPosition on MatSnackBarConfig.
type MatSnackBarVerticalPosition = 'top' | 'bottom';
Constants
MAT_SNACK_BAR_DEFAULT_OPTIONS
Injection token that can be used to specify default snack bar.
const MAT_SNACK_BAR_DEFAULT_OPTIONS: InjectionToken<MatSnackBarConfig<any>>;
MAT_SNACK_BAR_DATA
Injection token that can be used to access the data that was passed in to a snack bar.
const MAT_SNACK_BAR_DATA: InjectionToken<any>;
API reference for Angular Material snack-bar-testing
import {MatSnackBarHarness} from '@angular/material/snack-bar/testing';
Classes
MatSnackBarHarness
extends
ContentContainerComponentHarness
Harness for interacting with a mat-snack-bar in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
dismissWithAction
|
|
---|---|
Dismisses the snack-bar by clicking the action button. Method cannot be used for snack-bar's without action or with custom content. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getActionDescription
|
|
---|---|
Gets the description of the snack-bar. Method cannot be used for snack-bar's without action or with custom content. |
|
Returns | |
Promise<string>
|
|
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getAriaLive
|
|
---|---|
Gets the aria-live of the snack-bar's live region. The aria-live of a snack-bar is determined based on the ARIA politeness specified in the snack-bar config. |
|
Returns | |
Promise<AriaLivePoliteness>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getMessage
|
|
---|---|
Gets the message of the snack-bar. Method cannot be used for snack-bar's with custom content. |
|
Returns | |
Promise<string>
|
|
async
hasAction
|
|
---|---|
Whether the snack-bar has an action. Method cannot be used for snack-bar's with custom content. |
|
Returns | |
Promise<boolean>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDismissed
|
|
---|---|
Gets whether the snack-bar has been dismissed. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options SnackBarHarnessFilters = {}
|
Options for filtering which snack bar instances are considered a match. |
Returns | |
HarnessPredicate<MatSnackBarHarness>
|
a |
Deprecated
async
getRole
|
|
---|---|
Gets the role of the snack-bar. The role of a snack-bar is determined based on the ARIA politeness specified in the snack-bar config. |
|
Returns | |
Promise<'alert' | 'status' | null>
|
|
Interfaces
SnackBarHarnessFilters
A set of criteria that can be used to filter a list of MatSnackBarHarness
instances.