scenius-software / angular-toastify

A somewhat minimalistic clone of React Toastify.

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.

angular-toastify's Issues

when rendering many lib-toastify-toast-container they will be called as one element even though there's to many of them ? in each component

Prevent duplicated

Hello,

May it be a good idea to add an option to avoid duplicated toast?

Idea:
In "ToastifyToastContainerComponent" add an input: "@input() preventDuplicated = false;"
After receiving "toastAddedEvent", we check if a toast if same text already exist. If yes: we update the toast time to keep it 5s more.

If you are OK with this proposal, I can do it.

Toast comes and disappears immediately

Angular Ivy Compatibility?

After importing the module in some module of my application, it throws an error:

AngularToastifyModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I was able to fix it by setting aot: false in angular.json, but is there some other fix for this other than that?

Notification window pops up for a split second, disappears then reappears for another split second then finally goes away

Can you please help me with this issue ? I have been troubleshooting everything and nothing seems to change.

Coudn't use in a submodule

Works in app module but not in sub-module. Throwing following error, "BrowserModule has already been loaded"