Snackbar

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.