1.0.1 • Published 5 months ago

ng-flyweight-toaster v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

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:

PropertyTypeDefaultDescription
messagestring''The toast message text
type'success' | 'error' | 'warning' | 'info''info'Type of toast
durationnumber3000Auto-dismiss time in milliseconds
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'Position of the toast

🐟 License

MIT License


1.0.1

5 months ago

1.0.0

5 months ago

0.0.1

5 months ago