NGX Snackbar

Beautifully animated snackbar notifications for Angular.

⭐ Demo ⭐ Changelog ⭐ Contact

Features

• OnPush change detection strategy
• Standalone component
• SASS-based theming
• Dark and light theme support
• Localization support
• No dependencies

Installation

npm install --save @amirsavand/ngx-snackbar

Setup

Styles

Import the styles in your styles.scss:

@import "@amirsavand/ngx-snackbar/assets/styles";

To customize styling, either override the defaults after importing, or copy the file and write your own. To use SASS variables, import the variables file before the styles:

@import "@amirsavand/ngx-snackbar/assets/variables";
@import "@amirsavand/ngx-snackbar/assets/styles";

Component

Add the wrapper component to app.component.html:

<ngx-snackbar></ngx-snackbar>

Usage

Inject NgxSnackbarService and call .add() to display a snackbar:

import { NgxSnackbarService, Snackbar } from '@amirsavand/ngx-snackbar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {

  private readonly ngxSnackbarService = inject(NgxSnackbarService);

  constructor() {
    // Minimal usage
    this.ngxSnackbarService.add({ text: 'I am a simple snackbar.' });

    // Full configuration
    const snackbar: Snackbar = this.ngxSnackbarService.add({
      // Display text of the snackbar.
      text: 'I am a configured snackbar.',
      // Visual style of the snackbar.
      style: 'default', // default (optional)
      // Whether the user can click to dismiss the snackbar.
      dismissable: true, // default (optional)
      // Auto-dismiss delay in milliseconds.
      // Set to 0 to disable auto-dismiss.
      lifetime: 5000, // default (optional)
    });
  }
}

Savand Bros © 2022–present.