Snackbars

Snackbars provide brief messages about app processes at the bottom of the screen.

Installation

` npm install nira-snack-bar

`

Note

After installing nira-snack-bar, ensure you have the following requirements met:

// In your app.module.ts add this
import { NiraSnackBarModule } from "nira-snack-bar";

@NgModule({
  imports: [
    // other imports
    NiraSnackBarModule,
  ],
})
export class AppModule {}

Usage

Here's a simple example of how to use nira-snack-bar:

import { NiraSnackBarService } from "nira-snack-bar";

constructor(
    private niraSnackBarService: NiraSnackBarService
  ) {}

showSnackbar() {
this.niraSnackBarService.show("Your message here", {
  width: '300px',
  duration: 3000, // Display the message for 3 seconds
  horizontalPosition: 'top' | 'bottom' | 'center',
  verticalPosition: 'left' | 'right' | 'center',
  statusClass: 'error' | 'warning' | 'success' | 'info';
});
}

Option Details

Details of the Options for this.niraSnackBarService.show in the nira-snack-bar Library

| Option | Description | Required/Optional | Default Value | | -------------------- | ----------------------------------------------------------------------------------------------- | ----------------- | ------------------ | | message | The message to be displayed. | Required | N/A | | width | Width of the snack bar. | Optional | '300px' | | duration | Duration for which the message is displayed in milliseconds. For example, 3000 for 3 seconds. | Optional | 3000 (3 seconds) | | horizontalPosition | Horizontal position of the snack bar: 'top', 'bottom', or 'center'. | Optional | 'center' | | verticalPosition | Vertical position of the snack bar: 'left', 'right', or 'center'. | Optional | 'center' | | statusClass | CSS class for the type of message: 'error', 'warning', 'success', or 'info'. | Required | N/A |