Angular Toastify
A somewhat minimalistic clone of React Toastify.
This project was build on Angular version 12.0.5
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.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.
