Ng Flyweight Toaster 🚀

A lightweight, customizable Angular toaster notification library.

✨ Features

✅ Lightweight & fast
✅ Supports multiple toast types (success, error, warning, info)
✅ Custom positioning (top-right, top-left, bottom-right, bottom-left)
✅ Minimal dependencies

📦 Installation

Install via npm:

npm install ng-flyweight-toaster

🔌 Usage

1. Import the Module

In your app.module.ts:

import { NgFlyweightToasterModule } from 'ng-flyweight-toaster';

@NgModule({
  imports: [NgFlyweightToasterModule],
})
export class AppModule {}

2. Add the Toaster Component to Your HTML

Place the component in app.component.html or any parent component:

<ng-flyweight-toaster></ng-flyweight-toaster>

3. Show Toast Messages

Inject the service in your component:

import { Component } from '@angular/core';
import { NgFlyweightToasterService } from 'ng-flyweight-toaster';

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

  showToast() {
    this.toaster.showToast({
      message: 'Hello, World!',
      type: 'success',
      duration: 3000,
      position: 'top-right',
    });
  }
}

🎨 Customization

You can modify the toast styles, position, and duration:

| Property | Type | Default | Description | |-----------|---------|---------|-------------| | message | string | '' | The toast message text | | type | 'success' | 'error' | 'warning' | 'info' | 'info' | Type of toast | | duration | number | 3000 | Auto-dismiss time in milliseconds | | position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-right' | Position of the toast |

🐟 License

MIT License