DARK

CLASSIC

DETAIL WITH TYPE GROUPING

ACTIONS

BACKDROP

Snackbar For ANGULAR 4/5/6/7

SnackBar is a service for displaying snack-bar notifications. On latest version of angular 4/5/6/7.

• Group snackbar based on Type, Content.
• Rank snackbar.

Versions

Get Started

• ##### Please create issues or add suggestions, I am actively working on this module.

• Setup Code https://stackblitz.com/edit/ng7-snack-bar

• Demo https://ng7-snack-bar.stackblitz.io

• ##### Install

  npm install ng7-snack-bar --save
  npm install @ngrx/store --save
  npm install @angular/animations --save (Only for angular >=5.X )

• ##### Import the SnackBarModule

  import { SnackBarModule } from 'ng7-snack-bar';
  import { StoreModule } from '@ngrx/store';
   
  @NgModule({
    declarations: [AppComponent, ...],
    imports: [SnackBarModule.forRoot(), StoreModule.forRoot([]), ...],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }

• ##### Add the SnackBarContainer to AppComponent

 <sb-container></sb-container>

• ##### Import the SnackBarService to Needed Component

import { SnackBarService } from 'ng7-snack-bar';
 
constructor(
   private snackBarService: SnackBarService
) {}
 
showNotification(): void {
 // Info
 this.snackBarService.info('title', 'content', 'detail',);
 // Success
 this.snackBarService.success('title', 'content', 'detail');
 // Warn
 this.snackBarService.warn('title', 'content', 'detail');
 // Error
 this.snackBarService.error('title', 'content', 'detail');
}

Features

Additional Snackbar Configuration

# Service Details

Live

• Demo https://ng7-snack-bar.stackblitz.io

UpComing Feature 2.0.0

##### Will add shortly, stay tuned