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";