FNToast

FNToast is a professional, standalone Angular library for displaying toast notifications. It features a centralized service for triggering multiple types of alerts with built-in support for translations, dynamic icons, and automatic dismissal.

🌟 Features

• Standalone Component: No need for complex module registrations.
• Multiple Notification Types: Success, Error, Warn, and Info.
• Dynamic Icons: Powered by @arpudhabotupload/fn-icon-angular for consistent branding.
• Auto-dismissal: Configurable duration with a default fallback.
• Centralized Service: Trigger toasts from anywhere in your application.
• i18n Ready: Built-in support for @ngx-translate/core.

📦 Installation

Install the library and its peer dependencies:

npm install fn-toast @arpudhabotupload/fn-icon-angular @ngx-translate/core rxjs

⚙️ Setup

1. Configure Providers

Ensure your application provides HttpClient and TranslateService.

import { provideHttpClient } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(), importProvidersFrom(TranslateModule.forRoot())],
};

2. Add Toast Container

Add the fn-toast component to your root application template (usually app.component.html).

<fn-toast></fn-toast> <router-outlet></router-outlet>

import { FNToast } from 'fn-toast';

@Component({
  standalone: true,
  imports: [FNToast, RouterOutlet],
  // ...
})
export class AppComponent {}

🚀 Usage

Inject the ToastService to trigger notifications from any component or service.

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

export class MyComponent {
  private toastService = inject(ToastService);

  showSuccess() {
    this.toastService.success('Profile updated successfully!');
  }

  showError() {
    this.toastService.error('Failed to save changes.', 'Error');
  }
}

📄 API Reference

ToastService Methods

| Method | Parameters | Default Duration | Description | | :-------- | :----------------------------- | :--------------- | :------------------------------- | | success | (message, title?, duration?) | 3000ms | Triggers a success notification. | | error | (message, title?, duration?) | 5000ms | Triggers an error notification. | | warn | (message, title?, duration?) | 5000ms | Triggers a warning notification. | | info | (message, title?, duration?) | 5000ms | Triggers an info notification. | | remove | (id: string) | N/A | Removes a specific toast by ID. | | clear | () | N/A | Clears all active toasts. |

Toast Interface

export interface Toast {
  id: string;
  type: 'success' | 'error' | 'warn' | 'info';
  title?: string;
  message: string;
  duration?: number;
  isVisible?: boolean;
}

🎨 UI Customization

The component uses CSS variables for theming. You can override these in your global styles:

| Variable | Description | | :---------- | :----------------------------- | | --Base-90 | Background color of the toast. | | --Base-0 | Text and icon color. |

The container is positioned at the top-center by default:

.toast-container {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}