Snackbar implementation in Angular 7.
npm install ngx-snackbarindex.html
html
`
Angular CLI
.angular-cli.json
`json
...
"styles": [
"styles.css",
"../node_modules/ngx-snackbar/bundles/style.css"
],
...
`
$3
`javascript
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 {}
`
SystemJS
`javascript
System.config({
map: {
'ngx-snackbar': 'node_modules/ngx-snackbar/bundles/ngx-snackbar.umd.js'
}
});
`
$3
`html
`
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 |
###### Object: add method options plus id string.
$3
Import SnakckbarService from ngx-snackbar:
`typescript
import {Component} from '@angular/core';
import {SnackbarService} from 'ngx-snackbar';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
constructor(private snackbarService: SnackbarService) {}
}
`
Methods
- add(options: Object)
All options will override global values set on ngx-snackbar.
| Name | Description | Type | Default | Optional |
| --- | --- | --- | --- | --- |
| msg | Message to display in the snackbar (HTML accepted) | string | | false |
| 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 |
| action.text | Action button text. Snackbar will automatically dismiss on click | string | | true |
| action.color | Action button color. Requires action.text | string | #2196f3 | true |
| action.onClick | Action button callback. Requires action.text | Function | | true |
| onAdd | Callback gets triggered on snackbar add | Function | | true |
| onRemove | Callback gets triggered on snackbar remove | Function | | true |
- remove(id: string)
Remove snackbar on screen by ID.
- clear()
Clears all snackbars on screen.
Example
`typescript
import {Component} from '@angular/core';
import {SnackbarService} from 'ngx-snackbar';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
constructor(private snackbarService: SnackbarService) {
}
add() {
const _this = this;
this.snackbarService.add({
msg: 'Message sent.',
timeout: 5000,
action: {
text: 'Undo',
onClick: (snack) => {
console.log('dismissed: ' + snack.id);
_this.undo();
},
},
onAdd: (snack) => {
console.log('added: ' + snack.id);
},
onRemove: (snack) => {
console.log('removed: ' + snack.id);
}
});
}
clear() {
this.snackbarService.clear();
}
undo() {
...
}
}
``