@kudoengineer/toast

A modern, lightweight, customizable Toast Notification library for Angular 22+.

Features

• ✅ Standalone Components
• ✅ Angular Signals
• ✅ Tree Shakable
• ✅ Multiple Toast Types
• ✅ Queue Support
• ✅ Auto Close
• ✅ Progress Bar
• ✅ Close Button
• ✅ Custom Duration
• ✅ Duplicate Prevention
• ✅ Zero Dependencies
• ✅ Angular 22 Ready

Installation

npm install @kudoengineer/toast

Setup

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideToast } from '@kudoengineer/toast';

export const appConfig: ApplicationConfig = {
  providers: [
    provideToast({
      duration: 4000,
      position: 'top-right',
    }),
  ],
};

Import Component

import { Component } from '@angular/core';
import { KeToaster } from '@kudoengineer/toast';

@Component({
  selector: 'app-root',
  imports: [KeToaster],
  template: `
    <button (click)="show()">Show Toast</button>

    <ke-toaster />
  `,
})
export class AppComponent {}

Usage

import { inject } from '@angular/core';
import { ToastService } from '@kudoengineer/toast';

export class AppComponent {
  private toast = inject(ToastService);

  success() {
    this.toast.success('Saved Successfully');
  }

  error() {
    this.toast.error('Something went wrong');
  }

  warning() {
    this.toast.warning('Warning Message');
  }

  info() {
    this.toast.info('Information');
  }
}

Configuration

provideToast({
  duration: 4000,
  max: 5,
  newestOnTop: true,
  queue: true,
  progressBar: true,
  pauseOnHover: true,
  preventDuplicates: false,
  showClose: true,
  position: 'top-right',
});

Available Positions

top-left
top-center
top-right

bottom-left
bottom-center
bottom-right

Toast Types

toast.success(message);

toast.error(message);

toast.warning(message);

toast.info(message);

Component

<ke-toaster />

API

ToastService

| Method | Description | | ---------- | --------------------- | | success() | Success Toast | | error() | Error Toast | | warning() | Warning Toast | | info() | Info Toast | | clear() | Remove All Toasts | | remove(id) | Remove Specific Toast |

Browser Support

• Chrome
• Edge
• Firefox
• Safari

Angular Compatibility

| Angular | Supported | | ------- | --------- | | 22+ | ✅ |

Author

KudoEngineer

Created and maintained by Satendra Rajput.

• 🌐 Website: https://kudoengineer.com
• 💻 GitHub: https://github.com/satendra2rajput
• 💼 LinkedIn: https://www.linkedin.com/in/satendra2rajput

Contributing

Contributions, issues, and feature requests are welcome!

If you find a bug or have an idea for improvement, feel free to open an issue or submit a pull request.

License

MIT License © 2026 KudoEngineer.

Created and maintained by Satendra Rajput.