NgToastNotify

Lightweight and flexible toast notifications for Angular simply and effective, perfect to notify the user with short customized messages

This library was generated with Angular CLI version 17.3.0.

Live demo and documentation

Installation

Install via npm

npm install ng-toast-notify

Add component

Add the placeholder component in your HTML and ensure you have the required imports in your component.ts.

component.html

<toasty></toasty>

component.ts

import { ToastType, ToastyComponent, ToastyPromise, ToastyService } from 'ng-toast-notify'; 

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToastyComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {}

Service

Add the ToastyService to your component and use it to display toasts.

Inject the service in your component:

constructor(private _toastyService: ToastyService) { }

Display a basic toast!

Use the service to display toasts:

this._toastyService.showToast('Title', 'Message body');

Toast types

1. Simple toast, title and message
2. Info toast
3. Success toast
4. Warning toast
5. Error toast
6. None toast
7. Html message toast
8. Custom css toast
9. Long message
10. Loading icon
11. Promise toast
12. Emoji
13. Component toast

Toast features

1. Close on swipe
2. Notify sound (beep)
3. Progress bar
4. Sticky toast (have to be closed manually)
5. Group duplicate toasts
6. Schedule toasts