Dynamic Snackbar

A lightweight Angular Material-based Snackbar Library that provides beautiful, customizable, and consistent toast notifications throughout your application.

The library offers predefined notification types such as Success, Error, Warning, and Information while also allowing fully customizable snackbars through a configuration object.

Feedback / Suggestion / Report issue

https://github.com/AravindhanSenthilkumar/Feedback/issues/1

Features

• 🚀 Simple API
• 🎨 Angular Material Snackbar
• ✅ Success Notifications
• ❌ Error Notifications
• ⚠️ Warning Notifications
• ℹ️ Information Notifications
• 🎯 Fully Customizable
• ⏱ Configurable Duration
• 📍 Configurable Position
• 🎨 Custom Styling Support
• ⚡ Lightweight and Fast

Installation

npm install devlab-one-dynamic-snackbar

Inject Snackbar Service

import { SnackbarService } from 'devlab-one-dynamic-snackbar';

constructor(
  private snackbar: SnackbarService
) {}

Available Methods

show(config: SnackbarConfig): void;

success(
  message: string,
  title?: string
): void;

error(
  message: string,
  title?: string
): void;

warning(
  message: string,
  title?: string
): void;

info(
  message: string,
  title?: string
): void;

Success Snackbar

Display success notifications after successful operations.

this.snackbar.success(
  'Employee created successfully'
);

With Title

this.snackbar.success(
  'Employee created successfully',
  'Success'
);

Error Snackbar

Display application or API error messages.

this.snackbar.error(
  'Unable to create employee'
);

With Title

this.snackbar.error(
  'Unable to create employee',
  'Error'
);

Warning Snackbar

Display warning messages.

this.snackbar.warning(
  'You have unsaved changes'
);

With Title

this.snackbar.warning(
  'You have unsaved changes',
  'Warning'
);

Information Snackbar

Display informational messages.

this.snackbar.info(
  'New update available'
);

With Title

this.snackbar.info(
  'New update available',
  'Information'
);

Custom Snackbar

For complete control over the snackbar appearance and behavior, use the show() method.

this.snackbar.show({
  title: 'Success',
  message: 'Employee created successfully',
  type: 'success'
});

Snackbar Configuration

export interface SnackbarConfig {
  title?: string;
  message: string;
  type?: SnackbarType;
  duration?: number;
  horizontalPosition?: HorizontalPosition;
  verticalPosition?: VerticalPosition;
}

Snackbar Types

export enum SnackbarType {
  Success = 'success',
  Error = 'error',
  Warning = 'warning',
  Info = 'info'
}

Duration Configuration

Default snackbar duration can be overridden.

this.snackbar.show({
  title: 'Success',
  message: 'Employee created successfully',
  duration: 5000
});

Duration is specified in milliseconds.

| Value | Description | | ----- | ----------- | | 3000 | 3 seconds | | 5000 | 5 seconds | | 10000 | 10 seconds |

Position Configuration

Horizontal Position

horizontalPosition: 'start'
horizontalPosition: 'center'
horizontalPosition: 'end'
horizontalPosition: 'left'
horizontalPosition: 'right'

Vertical Position

verticalPosition: 'top'
verticalPosition: 'bottom'

Example

this.snackbar.show({
  title: 'Success',
  message: 'Employee created successfully',
  horizontalPosition: 'right',
  verticalPosition: 'top'
});

Complete Example

this.snackbar.show({
  title: 'Employee Created',
  message: 'Employee record saved successfully',
  type: SnackbarType.Success,
  duration: 5000,
  horizontalPosition: 'right',
  verticalPosition: 'top'
});

API Success Example

this.employeeService.create(employee)
  .subscribe({
    next: () => {
      this.snackbar.success(
        'Employee created successfully'
      );
    }
  });

API Error Example

this.employeeService.create(employee)
  .subscribe({
    error: () => {
      this.snackbar.error(
        'Unable to create employee'
      );
    }
  });

UI Examples

Success

┌──────────────────────────────┐
│ ✓ Success                    │
│ Employee created successfully│
└──────────────────────────────┘

Error

┌──────────────────────────────┐
│ ✕ Error                      │
│ Unable to create employee    │
└──────────────────────────────┘

Warning

┌──────────────────────────────┐
│ ⚠ Warning                    │
│ Unsaved changes detected     │
└──────────────────────────────┘

Information

┌──────────────────────────────┐
│ ℹ Information                │
│ New update available         │
└──────────────────────────────┘

Typical Usage Scenarios

Form Save

this.snackbar.success(
  'Form submitted successfully'
);

API Error

this.snackbar.error(
  'Unable to connect to server'
);

Warning Notification

this.snackbar.warning(
  'Session will expire in 2 minutes'
);

Application Update

this.snackbar.info(
  'Version 2.0 is now available'
);

Built With

• Angular 21+
• Angular Material Snackbar
• TypeScript
• RxJS

Why Dynamic Snackbar?

Instead of repeatedly configuring Angular Material snackbars throughout your application:

this.snackBar.open(
  message,
  'Close',
  {
    duration: 3000,
    horizontalPosition: 'right',
    verticalPosition: 'top'
  }
);

Simply use:

this.snackbar.success(
  'Employee created successfully'
);

and let the library handle styling, icons, duration, positioning, and consistency automatically.

License

MIT License