Angular wrapper for @andreasnicolaou/toastify — a lightweight, customizable toast notification manager.
npm install @andreasnicolaou/ngx-toastify @andreasnicolaou/toastifyMake sure both ngx-toastify and its underlying core package are installed.
- Import
NgxToastifyModulein yourAppModule
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.
- Use the
NgxToastifyServicein 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.' });
}
}- Simple toast API: success, error, info, warning, default
- Uses
@andreasnicolaou/toastifyunder the hood - Optional configuration using forRoot()
- Type-safe toast options
- Custom CSS class support
| Method | Parameters | Description |
|---|---|---|
default |
{ title: string, message?: string }, options?: ToastifyOptions |
Shows a default 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 toastmessage: Optional — the body text (defaults to'')options: Optional — configuration object from the core@andreasnicolaou/toastifypackage
To include the styles from @andreasnicolaou/toastify, add the CSS manually:
Contributions are welcome! If you encounter issues or have ideas to enhance the library, feel free to submit an issue or pull request.