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

| ng7-snack-bar | Angular | | ------------ | ------- | | 1.6.0 | 4.x | | 1.7.0 | 5.x | | 1.7.0 | 6.x | | 1.7.0 | 7.x |

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

| OPTION | TYPE | DEFAULT | DESCRIPTION | |------------------------|-------------------|---------------------------------|-------------------------------------------| | position | PositionType | BOTTOM_RIGHT | 4 Positions, to show the snack-bar | | maxNoOfSnackBar | number | 10 | Displays max no of snackbar | | autoCloseOnTransition | boolean | false | Auto closes when page route occurs | | template | TemplateType | CLASSIC | Classic/Dark templates | | groupRuleType | GroupRuleType | NO_RULE | Groups the snack-bar based on type/content| | rankBars | Array | [] | Based on rank the snackbar displays | | infoOptions | IBarOptions | | Configure Info snackbar | | successOptions | IBarOptions | | Configure Success snackbar | | warnOptions | IBarOptions | | Configure Warn snackbar | | errorOptions | IBarOptions | | Configure Error snackbar |

Additional Snackbar Configuration

| OPTION | TYPE | DEFAULT | DESCRIPTION | |------------------------|-------------------|---------------------------------|-------------------------------------------| | isClose | boolean | false | Shows/Hides the close button | | closeTimeOut | number | 0 | Autoclose after specified interval | | isDetail | boolean | false | Shows/Hides the detail button | | panelClass | string | | Overrides the specific snackbar class | | opacity | number | 1 | Specifies the opacity of snackbar |

Service Details

| SERVICE | ARGUMENTS | TYPE | DESCRIPTION | |-------------------------------|-------------------|--------------------|-------------------------------------------------| | info, warn, success, error | title | string | Snack bar title, default 'Info' | | | content | string | Snack bar content | | | detail | string | Snack bar detail | | | actions | ISnackBarAction[] | max-3 label, isAutoClose, callBack: () => {} | | | options | ISnackBarConfig | isBackDrop |

Live

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

UpComing Feature 2.0.0

Will add shortly, stay tuned