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.

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

Additional configuration options for the snackbar.

Returns
MatSnackBarRef<SimpleSnackBar>

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

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

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
NameDescription

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
NameDescription

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 to place the overlay for the snack bar into.

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

Properties
NameDescription

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
NameDescription

dismissedByAction: boolean

Whether the snack bar was dismissed using the action button.

Possible values for horizontalPosition on MatSnackBarConfig.

Type: 'start' | 'center' | 'end' | 'left' | 'right'

Possible values for verticalPosition on MatSnackBarConfig.

Type: 'top' | 'bottom'