Angular Toastify

A somewhat minimalistic clone of React Toastify.

This project was build on Angular version 12.0.5

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)
[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');
 }

Changelog

1.0.6

• Add Ivy support

1.0.5

• Added a new property preventDuplicates on the Toastify Container. When set to true, toasts with identical texts will no longer create duplicates, but should instead increase the time the already present toast will be on visible on the screen. Credits go to @JoranLive for implementing this feature.

1.0.4

• Module no longer imports BrowserModule. Angular Toastify can now be used in submodules.
• Updated to Angular 12

1.0.2

• Run toast outside Angular so they do not delay Protractor tests.