NgxToaster

A modern, lightweight toast notification library for Angular 19+ applications.

Features

• 🚀 Built with Angular 19's new signal-based architecture
• 🎯 Multiple toast positions (top-right, top-left, etc.)
• 🌈 Different toast types (success, error, warning, info)
• ⏱️ Configurable durations
• 🖱️ Dismissible toasts
• 🔄 Smooth animations using Angular animations
• 🧩 Standalone components ready for Angular's future

Installation

npm install @sachetacharya/ngx-toaster --save

Usage

Import the module in your app

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations()
    // other providers...
  ]
};

Using the ToasterService

import { Component, inject } from '@angular/core';
import { ToasterService } from 'ngx-toaster';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showToast()">Show Toast</button>
  `
})
export class AppComponent {
  private toaster = inject(ToasterService);

  showToast() {
    this.toaster.show({
      message: 'Operation completed successfully!',
      type: 'success',
      duration: 3000,
      position: 'top-right',
      dismissible: true
    });
  }
}

API

ToasterService

The main service for showing toasts.

• show(config: ToastConfig): string - Shows a toast notification and returns the toast ID
• remove(id: string): void - Removes a specific toast by ID
• clearAll(): void - Removes all active toasts

ToastConfig

Interface for configuring toast notifications:

export interface ToastConfig {
  message: string;         // Toast message
  type?: ToastType;        // 'success' | 'error' | 'warning' | 'info'
  duration?: number;       // Duration in ms (default: 3000, 0 = no auto-dismiss)
  position?: ToastPosition;// Position on screen (default: 'top-right')
  dismissible?: boolean;   // Can be dismissed by user (default: true)
}

ToastPosition

Available positions for toast notifications:

• 'top-right' (default)
• 'top-left'
• 'bottom-right'
• 'bottom-left'
• 'top-center'
• 'bottom-center'

Demo Component

This library includes a demo component that you can use to test the toasts:

import { Component } from '@angular/core';
import { ToasterDemoComponent } from 'ngx-toaster';

@Component({
  selector: 'app-root',
  template: `
    <toast-demo></toast-demo>
  `,
  standalone: true,
  imports: [ToasterDemoComponent]
})
export class AppComponent {}

License

MIT