Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Snackbar

SnackBar shows transient overlay feedback after an action or background result. Use it for short non-blocking messages such as “Saved”, “Copied”, “Invite sent”, “Refresh complete”, “Export started”, or “Deleted” with an optional quick action such as “Undo” or “View”.

Open snack bars through the SnackBar service with open(message, action?, config?), openFromComponent, or openFromTemplate. Configure duration, top or bottom placement, horizontal position, custom data, and custom component or template content when needed.

Do not use SnackBar for field validation errors, persistent inline messages, global important header messages, critical required actions, confirmations before destructive actions, modal workflows, long-lived notification inboxes, incident banners, or loading and progress states. Use FormField errors, Alert, Announcement, ActionRequired, Confirm, Dialog, Notifications, Incidents, ProgressBar, or loaders when those match the job better.

SnackBar Service

MethodReturns
open(message: string, action?: string, config?: SnackBarConfig)
Opens a snack bar with a message and an optional action.
SnackBarRef<SimpleSnackBar>
openFromComponent(component: Type, config?: SnackBarConfig)
Opens a snack bar with a custom component.
SnackBarRef<T>
openFromTemplate(template: TemplateRef, config?: SnackBarConfig)
Opens a snack bar with a custom template.
SnackBarRef<any>
dismiss()
Dismisses the currently-visible snack bar.
void

SnackBarConfig

PropertyTypeDefault
politeness
The politeness level for the MatAriaLiveAnnouncer announcement.
AriaLivePolitenessassertive
announcementMessage
Message to be announced by the LiveAnnouncer.
string''
duration
The duration in milliseconds to wait before automatically closing the snack bar.
number0
panelClass
Extra CSS classes to be added to the snack bar container.
string | string[]undefined
direction
Text layout direction for the snack bar.
Directionundefined
horizontalPosition
The horizontal position to place the snack bar.
SnackBarHorizontalPositioncenter
verticalPosition
The vertical position to place the snack bar.
SnackBarVerticalPositionbottom
data
Data being injected into the child component.
anynull