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
| 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
``js
npm install ng7-snack-bar --save
npm install @ngrx/store --save
npm install @angular/animations --save (Only for angular >=5.X )
`
* ##### Import the SnackBarModule
`js
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
`html
`
* ##### Import the SnackBarService to Needed Component
`js
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.ioUpComing Feature 2.0.0
##### Will add shortly, stay tuned