Ngx Snackbar Toast Notifications For Angular

Angular 7 Notifications Snackbar (AKA Toast) component can be used to display notification information for a short period of time.

angular material toast vs snackbar, angular material notification, custom snackbar angular, angularmaterial snackbar position, angular snackbar example

Angular ngx Bootstrap Alerts As Notifications Plugin

How to make use of it:

Installation

npm install --save ngx-snackbar

Usage

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SnackbarModule} from 'ngx-snackbar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SnackbarModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

<ngx-snackbar></ngx-snackbar>

Options

Use these properties to customize the snackbar component.

Name	Description	Type	Default	Optional
position	The position where the snackbar appears	`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`	`bottom-right`	true
max	The maximum number of snackbars allowed on screen	number	(Infinite)	true
timeout	Number of milliseconds before the snackbar closes	number	(Infinite)	true
color	Text color in hex	string	`auto`	true
background	Background color in hex	string	`#343434`	true
customClass	Custom class to append to the snackbar	string		true
accent	Action button color. Requires `action.text`	string	`#2196f3`	true

Events

Name	Description	Return
onAdd	Callback gets triggered on snackbar add	Object
onRemove	Callback gets triggered on snackbar remove	Object
onClear	Callback gets triggered on snackbar clear	boolean

Snackbar angular Notification Component, ngx-snackbar Plugin/Github