ngx-snackbar

Angular 7 component for Snackbar (AKA Toast) notifications.

Demo

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

<link rel="stylesheet" href="node_modules/ngx-snackbar/bundles/style.css">

Angular CLI

.angular-cli.json

...
  "styles": [
   "styles.css",
   "../node_modules/ngx-snackbar/bundles/style.css"
  ],
...

Import SnackbarModule

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

System.config({
  map: {
    'ngx-snackbar': 'node_modules/ngx-snackbar/bundles/ngx-snackbar.umd.js'
  }
});

Place the ngx-snackbar tag on your template

<ngx-snackbar></ngx-snackbar>

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:

import {Component} from '@angular/core';
import {SnackbarService} from 'ngx-snackbar';

@Component({
  selector: 'app-root',
  template: `
    <ngx-snackbar></ngx-snackbar>
  `
})
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

import {Component} from '@angular/core';
import {SnackbarService} from 'ngx-snackbar';

@Component({
  selector: 'app-root',
  template: `
      <button (click)="add()">Add Snackbar</button>
      <br>
      <button (click)="clear()">Clear</button>
      
      <ngx-snackbar [position]="'bottom-center'" [max]="3"></ngx-snackbar>
  `
})
export class AppComponent {
  constructor(private snackbarService: SnackbarService) {
  }

  add() {
    const _this = this;
    this.snackbarService.add({
      msg: '<strong>Message sent.</strong>',
      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 for the compilation scripts.

License

MIT