angular-toastify

Angular Toastify

A somewhat minimalistic clone of React Toastify.

This project was build on Angular version 8.0.3.

Demo!

Typical setup and usage

Import package:

npm i angular-toastify

Add to app.module.ts:

import { ToastService, AngularToastifyModule } from 'angular-toastify'; 

@NgModule({
  declarations: [...],
  imports: [
    ...
    AngularToastifyModule,
    ...
  ],
  providers: [ToastService],
  bootstrap: [...]
})
export class AppModule { }

Add to any component within visible layout:

<lib-toastify-toast-container></lib-toastify-toast-container>

Toast container options (optional)

<lib-toastify-toast-container 
[position]="'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"  (default: 'top-right')
[transition]="'bounce' | 'slide' | 'zoom' | 'flip'" (default: 'bounce)
[autoClose]="time in ms (0 = disabled)" (default: 5000)
[autoCloseSuccess]="time in ms (0 = disabled)" (default: undefined)
[autoCloseInfo]="time in ms (0 = disabled)" (default: undefined)
[autoCloseWarn]="time in ms (0 = disabled)" (default: undefined)
[autoCloseError]="time in ms (0 = disabled)" (default: undefined)
[hideProgressBar]="true | false"  (default: false)
[newestOnTop]="true | false"  (default: false)
[closeOnClick]="true | false" (default: true)
[pauseOnHover]="true | false" (default: true)
[pauseOnVisibilityChange]="true | false"  (default:  true)
[iconLibrary]="'material' | 'font-awesome' | 'none';"  (default: 'none')

></lib-toastify-toast-container>

Add to component or service:

 constructor(private _toastService: ToastService) { }

 addInfoToast() {
    this._toastService.info('message');
 }