@amirsavand/ngx-snackbar

Beautifully animated snackbar notifications for Angular projects.

Usage

Install the package.

npm install --save @amirsavand/ngx-snackbar

Load the styles in your styles.scss (or anywhere you see fit).

If you want to customize the styling, you can read the styles.scss and override what you need or copy it and write your own instead of loading it.

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

If you want to do some styling via SASS, load and read the variables file (before importing the styles.scss).

$snackbar-dark: #212529;
$snackbar-border-radius: 100rem;

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

Import the module in app.module.ts. BrowserAnimationsModule is required for the animations.

import { NgxSnackbarModule } from '@amirsavand/ngx-snackbar';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgxSnackbarModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}

Use the wrapper component in app.component.html.

<ngx-snackbar></ngx-snackbar>

Add a toast from your scripts like this.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public ngxSnackbarService: NgxSnackbarService) {
  }

  ngOnInit(): void {
    /** You can make a snackbar in the simplest way. */
    this.ngxSnackbarService.add({ text: 'I am a simple snackbar with default values.' });
    /** You can make a snackbar with configurations. */
    const snackbar: Snackbar = this.ngxSnackbarService.add({
      /** UI text of the snackbar. */
      text: 'I am a cool snackbar.',
      /** UI style of the snackbar. */
      style: 'light', // default (optional)
      /** Allow click to dismiss or hide the snackbar. */
      dismissable: true, // default (optional)
      /**
       * Duration of the snackbar in milliseconds to hide.
       * If set to 0, it will not close automatically.
       */
      lifetime: 5000, // default (optional)
    });
  }
}

Documentation

All scripts (including SASS files) have documentation. For now, you can view the source code reference for any item you want and read its docs.