toastr-ng2
DEMO: https://scttcper.github.io/toastr-ng2/
Features
- No use of
*ngFor
. Fewer dirty checks and higher performance. - Component inheritance for custom toasts
- angular-cli AoT compilation and lazy loading compatible
- SystemJS rollup bundle
- Automatic Toast component injection based on @angular2-material/core/overlay
- Animations using angular 2's Web Animations API (pollyfill needed for older devices)
- Target a specific directive with toasts
Install
npm install toastr-ng2 --save
Setup
step 1: copy toast css to your project. If you are using sass you can import the css.
;
If you are using angular-cli you can add it to your angular-cli.json
"styles": [
"styles.scss",
"node_modules/toastr-ng2/toastr.css"
]
step 2: add ToastrModule to app NgModule
;;
Use
Success:
;
Options
There's global options and individual toast options. All individual toast options are included in the global options. See file toastr-config.ts
The toastComponent can be inherited and modified. See the pink toast in the demo. It has a different animation and inline style.
ToastrConfig (Global Options)
maxOpened: number = 0; // max toasts opened. Toasts will be queuedautoDismiss: boolean = false; // dismiss current toast when max is reachediconClasses =;newestOnTop: boolean = true; // new toast placementpreventDuplicates: boolean = false; // block duplicate messages
ToastConfig (Individual Toast options)
toastComponent = Toast; // the angular 2 component that will be usedcloseButton: boolean = false; // show close buttontimeOut: number = 5000; // time to liveenableHtml: boolean = false; // allow html in message. (UNSAFE)extendedTimeOut: number = 1000; // time to close after a user hovers over toastprogressBar: boolean = false; // show progress bartoastClass: string = 'toast'; // class on toastpositionClass: string = 'toast-top-right'; // class on toasttitleClass: string = 'toast-title'; // class inside toast on titlemessageClass: string = 'toast-message'; // class inside toast on messagetapToDismiss: boolean = true; // close on clickonActivateTick: boolean = false; // fire a ApplicationRef.tick() from the toast component when activated. Might help show the toast if you are firing it from a websocket
Override default settings
NEW FOR VERSION > 3 Option 1: Pass values to ToastrModule.forRoot
// your NgModuleimports: ,
Option 2: Inject ToastrConfig, typically in your root component, and customize the values.
;;
individual toast settings
success, error, info, warning take (message, title, ToastConfig)
pass a ToastConfig object to replace several default settings.
// OPTIONAL: import the ToastConfig interface; ;this.toastrService.error'everything is broken', 'title is optional', errorConfig;
Toastr Service methods return:
Toastr Service will return undefined if prevent duplicates is on.
Put toasts in your own container
Put toasts in a specific div inside your application. This should probably be somewhere that doesn't get deleted.
Add ToastContainerModule.forRoot()
to ngModule after the ToastrModule.forRoot()
Add a div with toastContainer
directive on it.
import { ToastContainerDirective } from 'toastr-ng2';
@Component({
selector: 'app-root',
template: `<div toastContainer class="toast-top-right"></div>`,
})
export class AppComponent implements OnInit {
@ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.overlayContainer = this.toastContainer;
this.toastrService.success('in div');
}
}
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map
needs to tell the System loader where to look for toastr-ng2
:
map: 'toastr-ng2': 'node_modules/toastr-ng2/toastr.umd.js'
Previous Works
angular-toastr and the original toastr.
License
MIT