Propmix Snackbar

A simple stackable snack bar based on the Angular Material Snackbar component.

Peer Dependencies

Make sure you have the following minimum versions of dependencies installed.

Angular 15.0.0 or higher
Angular Material 15.0.0 or higher
RxJS 7.0.0 or higher

Installation

npm install @propmix/snackbar

Importing

Import the SnackbarModule into the root module, usually AppModule, and we are good to go.

import { SnackbarModule } from '@propmix/snackbar';

@NgModule({
  imports: [
    ...
    SnackbarModule
  ]
})

The snackbar has some default configurations which can be changed by providing a custom configuration while loading the module. All of the below configurations are optional.

@NgModule({
  imports: [
    ...
    SnackbarModule.forRoot({
      position?: {
        vertical?: SnackbarVerticalPosition; // Default: 'top'
        horizontal?: SnackbarHorizontalPosition; // Default: 'end'
      };
      autoDismissDuration?: {
        success?: number; // Default: 4000
        info?: number; // Default: 6000
        warning?: number; // Default: undefined
        error?: number; // Default: undefined
      };
    }),
  ],
})

Usage

⚠ Warning : If there is any custom global styling for the snackbar or mat-icon, make sure to remove it or make it component specific before using this library.

Open Snack bar

You can use the SnackbarService.push() to open/add a snack bars onto the stack.

import { SnackbarService } from '@propmix/snackbar';

constructor(private snackbarService: SnackbarService) {}

// Opens a snack bar that will be dismissed based on the default dismiss behavior.
this.snackbarService.push('error', 'This is a snack bar message');

// Opens a snack bar that will automatically close after 4 seconds
this.snackbarService.push('success', 'This is a snack bar message', 4000);

Close Snack bar

You can use the SnackbarService.pop() to close/remove the first added or a specific snack bar from the stack.

// Removes the first added snack bar from the stack
this.snackbarService.pop();

const referenceId: number = this.snackbarService.push("success", "This is a snack bar message");

// Removes a specific snack bar from the stack
this.snackbarService.pop(referenceId);

Clear all Snack bars

You can use the SnackbarService.clearAll() to close/remove all snack bars from the stack.

this.snackbarService.clearAll();

Default dismiss behavior

The default dismiss behavior changes based on the snackbar type as shown below.

Snackbar Type	Duration for Auto-Dismissal
success	4000 ms
info	6000 ms
warning	No Auto-dismiss
error	No Auto-dismiss

API

SnackbarService.push()

Parameter	Type	Required	Description
type	SnackbarType	Yes	Whether it should be a success, info, warning or error.
message	string	Yes	Message to be displayed in the snackbar.
duration	number	No	Duration in milliseconds after which the snackbar should close. If duration is not specified, the snackbar will be dismissed based on the default dismiss behavior.

Returns : number - Reference ID of the snackbar that was added to the stack.

SnackbarService.pop()

Parameter	Type	Required	Description
referenceId	number	No	Reference ID of the snackbar to be removed from the stack. If referenceId is not specified, the first added snackbar will be removed.

Returns : void

SnackbarService.clearAll()

Returns : void

Interfaces

SnackbarConfig

{
  position: {
    vertical?: SnackbarVerticalPosition;
    horizontal?: SnackbarHorizontalPosition;
  };
  autoDismissDuration: {
    success?: number;
    info?: number;
    warning?: number;
    error?: number;
  };
}

SnackbarType

"success" | "info" | "warning" | "error";

SnackbarVerticalPosition

"top" | "bottom";

SnackbarHorizontalPosition

"start" | "center" | "end";