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-mdc-snack-bar-handset'

The CSS class to apply for handset mode.

simpleSnackBarComponent: SimpleSnackBar

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

snackBarContainerComponent: MatSnackBarContainer

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

Selector: simple-snack-bar

Exported as: matSnackBar
Properties
Name Description

data: inject(MAT_SNACK_BAR_DATA)

hasAction: boolean

If the action button should be shown.

snackBarRef: inject<MatSnackBarRef<SimpleSnackBar>>(MatSnackBarRef)

Methods
action

Performs the action on the snack bar.

Directive that should be applied to the text element to be rendered in the snack bar.

Selector: [matSnackBarLabel]

Directive that should be applied to the element containing the snack bar's action buttons.

Selector: [matSnackBarActions]

Directive that should be applied to each of the snack bar's action buttons.

Selector: [matSnackBarAction]

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.

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>

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.

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 mat-snack-bar in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-snack-bar-container:not([mat-exit])'

The selector for the host element of a MatSnackBar instance.

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

static
with

Gets a HarnessPredicate that can be used to search for a MatSnackBarHarness that meets certain criteria.

Parameters

options

SnackBarHarnessFilters = {}

Options for filtering which snack bar instances are considered a match.

Returns
HarnessPredicate<MatSnackBarHarness>

a HarnessPredicate configured with the given options.

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>

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

Azure & Blue theme selected.