1.0.1 ⢠Published 5 months ago
ng-flyweight-toaster v1.0.1
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