Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dank/ngx-snackbar
Snackbar / Toast notifications for Angular
https://github.com/dank/ngx-snackbar
angular notification snackbar toast
Last synced: 3 months ago
JSON representation
Snackbar / Toast notifications for Angular
- Host: GitHub
- URL: https://github.com/dank/ngx-snackbar
- Owner: dank
- License: mit
- Created: 2017-09-28T15:59:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:53:00.000Z (about 2 years ago)
- Last Synced: 2024-10-12T05:54:43.917Z (4 months ago)
- Topics: angular, notification, snackbar, toast
- Language: TypeScript
- Homepage:
- Size: 3.04 MB
- Stars: 11
- Watchers: 2
- Forks: 12
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - dank/ngx-snackbar - Snackbar / Toast notifications for Angular (UI Components / Notification)
README
# ngx-snackbar
> Angular 7 component for Snackbar (AKA Toast) notifications.
[Demo](http://kyung.ca/ngx-snackbar/)
## Installation
npm install --save ngx-snackbar
## Usage
### Import default styles
Import styles.css into your app. This step is optional, feel free to theme the snackbars to your liking.
`index.html`
```html
```
**Angular CLI**
`.angular-cli.json`
```json
...
"styles": [
"styles.css",
"../node_modules/ngx-snackbar/bundles/style.css"
],
...
```
### Import `SnackbarModule`
```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'
}
});
```
### Place the `ngx-snackbar` tag on your template
```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.*
### Use the `SnackbarService` to control snackbars
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: `
Add Snackbar
Clear
`
})
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() {
...
}
}
```
## Credits
Thanks [angular-library-starter](https://github.com/robisim74/angular-library-starter) for the compilation scripts.
## License
[MIT](/LICENSE)