NgxToastify — @andreasnicolaou/ngx-toastify

Angular wrapper for @andreasnicolaou/toastify — a lightweight, customizable toast notification manager.

📦 Installation

npm install @andreasnicolaou/ngx-toastify @andreasnicolaou/toastify

Make sure both ngx-toastify and its underlying core package are installed.

🚀 Quick Start

1. Import NgxToastifyModule in your AppModule

import { NgxToastifyModule } from '@andreasnicolaou/ngx-toastify';

@NgModule({
  imports: [
    NgxToastifyModule.forRoot('top-right', {
      maxToasts: 3,
      customClasses: 'my-toast',
    }),
  ],
})
export class AppModule {}

forRoot() is optional. If omitted, it will use default values.

2. Use the NgxToastifyService in your components

import { Component } from '@angular/core';
import { NgxToastifyService } from '@andreasnicolaou/ngx-toastify';

@Component({
  selector: 'app-example',
  template: `<button (click)="showToast()">Show Toast</button>`,
})
export class ExampleComponent {
  constructor(private ngxToastifyService: NgxToastifyService) {}

  showToast() {
    this.ngxToastifyService.success({ title: 'Success!', message: 'This is a toast message.' });
  }
}

🧩 Features

• Simple toast API: success, error, info, warning, default
• Uses @andreasnicolaou/toastify under the hood
• Optional configuration using forRoot()
• Type-safe toast options
• Custom CSS class support

🛠 API

NgxToastifyService Methods

| Method | Parameters | Description | | --------- | ---------------------------------------------------------------- | --------------------- | | default | { title: string, message?: string }, options?: ToastifyOptions | Shows a default toast | | light | { title: string, message?: string }, options?: ToastifyOptions | Shows a light toast | | success | { title: string, message?: string }, options?: ToastifyOptions | Shows a success toast | | error | { title: string, message?: string }, options?: ToastifyOptions | Shows an error toast | | warning | { title: string, message?: string }, options?: ToastifyOptions | Shows a warning toast | | info | { title: string, message?: string }, options?: ToastifyOptions | Shows an info toast |

• title: Required — the headline of the toast
• message: Optional — the body text (defaults to '')
• options: Optional — configuration object from the core @andreasnicolaou/toastify package

🎨 Styles

To include the styles from @andreasnicolaou/toastify, add the CSS manually:

// angular.json
"styles": [
  "node_modules/@andreasnicolaou/toastify/dist/styles.css"
]

📦 Contribution

Contributions are welcome! If you encounter issues or have ideas to enhance the library, feel free to submit an issue or pull request.