JetSnackbar

A customizable Angular snackbar library built with Angular Material, providing success, warning, and error notification types with beautiful theming.

Features

• 🎨 Pre-built themes for success, warning, and error notifications
• 🔧 Fully customizable styling
• 📱 Responsive design
• ⚡ Built with Angular 20 and Angular Material
• 🚀 Easy to integrate and use

Installation

npm install jet-snackbar

Dependencies

This library requires Angular Material. If you haven't installed it yet:

ng add @angular/material

Setup

1. Import the Module

Add JetSnackbarModule to your app module:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { JetSnackbarModule } from "jet-snackbar";

import { AppComponent } from "./app.component";

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

2. Import the Styles

Add the theme styles to your global styles.scss file:

// Import jet-snackbar themes
@use "jet-snackbar/src/lib/themes.scss";

Usage

Inject the Service

import { Component } from '@angular/core';
import { JetSnackbarService } from 'jet-snackbar';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private jetSnackbarService: JetSnackbarService) {} 
  
  Or
  
  private jetSnackbarService = inject(JetSnackbarService)


  this.jetSnackbarService.showSnackbar(title: string, msg: string, color: "snackbar-success" | "snackbar-error" | "snackbar-warning", duration: number, button?: string )

example

this.jetSnackbarService.showSnackbar("Success", "Form successfully updated", "snackbar-success", 3000, "Close" )
}

Service Methods

The JetSnackbarService provides the following methods:

showSnackbar(title: string, msg: string, color: "snackbar-success" | "snackbar-error" | "snackbar-warning", duration: number, button?: string )

Shows a notification with styling based on the color parameter.

Styling

The library comes with pre-built CSS themes. You can customize the colors by overriding the CSS custom properties:

:root {
  --success-color: #4caf50; // Green for success
  --warning-color: #ff9800; // Orange for warnings
  --error-color: #f44336; // Red for errors
}

Custom Styling

You can override the default styles by targeting the snackbar classes:

.snackbar-success {
  --mdc-snackbar-container-color: var(--success-color) !important;
  color: white;

  .mat-simple-snackbar-action {
    color: white;
  }
}

.snackbar-warning {
  --mdc-snackbar-container-color: var(--warning-color) !important;
  color: white;

  .mat-simple-snackbar-action {
    color: white;
  }
}

.snackbar-error {
  --mdc-snackbar-container-color: var(--error-color) !important;
  color: white;

  .mat-simple-snackbar-action {
    color: white;
  }
}

Peer Dependencies

• @angular/core: ^20.0.0
• @angular/material: ^20.0.0
• @angular/cdk: ^20.0.0

Compatibility

• Angular 20+
• Angular Material 20+

Development

This library was built with Angular CLI version 19.

Building

ng build jet-snackbar

Testing

ng test jet-snackbar

Publishing

ng build jet-snackbar
cd dist/jet-snackbar
npm publish

License

MIT License

Support

For issues and feature requests, please create an issue on the project repository.