Snackbar

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
API for snack-bar

API reference for Angular Material snack-bar

import {MatSnackBarModule} from '@angular/material/snack-bar';

Service to dispatch Material Design snack bar messages.

Properties
Name Description

handsetCssClass: 'mat-snack-bar-handset'

The CSS class to applie for handset mode.

simpleSnackBarComponent: Type<TextOnlySnackBar>

The component that should be rendered as the snack bar's simple component.

snackBarContainerComponent: Type<_SnackBarContainer>

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<any>

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

A component used to open as the default snack bar, matching material spec. This should only be used internally by the snack bar service.

Selector: simple-snack-bar

Properties
Name Description

data: { message: string; action: string; }

Data that was injected into the snack bar.

hasAction: boolean

If the action button should be shown.

snackBarRef: MatSnackBarRef<SimpleSnackBar>

Methods
action

Performs the action on the snack bar.

Configuration used when opening a snack-bar.

Properties
Name Description

announcementMessage: string

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: D | null

Data being injected into the child component.

direction: Direction

Text layout direction for the snack bar.

duration: number

The length of time in milliseconds to wait before automatically dismissing the snack bar.

horizontalPosition: MatSnackBarHorizontalPosition

The horizontal position to place the snack bar.

panelClass: string | string[]

Extra CSS classes to be added to the snack bar container.

politeness: AriaLivePoliteness

The politeness level for the MatAriaLiveAnnouncer announcement.

verticalPosition: MatSnackBarVerticalPosition

The vertical position to place the snack bar.

viewContainerRef: ViewContainerRef

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.

Reference to a snack bar dispatched from the snack bar service.

Properties
Name Description

instance: T

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.

Event that is emitted when a snack bar is dismissed.

Properties
Name Description

dismissedByAction: boolean

Whether the snack bar was dismissed using the action button.

Interface for a simple snack bar component that has a message and a single action.

Properties
Name Description

action: () => void

data: { message: string; action: string; }

hasAction: boolean

snackBarRef: MatSnackBarRef<TextOnlySnackBar>

Possible values for horizontalPosition on MatSnackBarConfig.

type MatSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right';

Possible values for verticalPosition on MatSnackBarConfig.

type MatSnackBarVerticalPosition = 'top' | 'bottom';

Injection token that can be used to specify default snack bar.

const MAT_SNACK_BAR_DEFAULT_OPTIONS: InjectionToken<MatSnackBarConfig<any>>;

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

Harness for interacting with a standard mat-snack-bar in tests.

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
getMessage

Gets the message of the snack-bar. Method cannot be used for snack-bar's with custom content.
Returns
Promise<string>

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>

async
hasAction

Whether the snack-bar has an action. Method cannot be used for snack-bar's with custom content.
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

async
isDismissed

Gets whether the snack-bar has been dismissed.
Returns
Promise<boolean>

A set of criteria that can be used to filter a list of MatSnackBarHarness instances.

Snackbar
Testing