Bootstrap toasts and alerts Premium component
To improve the communication between your website/application and its users, you might want to consider adding some automatic pop-up messages.
With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.
Examples
Info message Warning message Success message Error message
<!--Info message-->
<a class="btn btn-info" (click)="showInfo()" ripple-radius>Info message</a>
<!--Warning message-->
<a class="btn btn-warning" (click)="showWarning()" ripple-radius>Warning message</a>
<!--Success message-->
<a class="btn btn-success" (click)="showSuccess()" ripple-radius>Success message</a>
<!--Error message-->
<a class="btn btn-danger" (click)="showError()" ripple-radius>Error message</a>
Data structure:
import { ToastrService } from 'your_path_to/alerts/index';
import { ToastConfig } from 'your_path_to/alerts/index';
export class AppComponent {
constructor(private toastrService: ToastrService) {}
showSuccess() {
this.toastrService.success('Info message');
}
showError() {
this.toastrService.error('Warning message');
}
showInfo() {
this.toastrService.info('Success message');
}
showWarning() {
this.toastrService.warning('Error message');
}
}
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.
ToastrConfig (Global Options)
Name | Default | Description |
---|---|---|
maxOpened: number | 0 | max toasts opened; toasts will be queued |
autoDismiss: boolean | false | dismiss current toast when max is reached |
iconClasses | error: 'toast-error', info: 'toast-info', success: 'toast-success', warning: 'toast-warning' | classes used on toastr service methods |
newestOnTop: boolean | true | new toast placement |
preventDuplicates: boolean | false | block duplicate messages |
ToastConfig (Individual Toast options)
Name | Default | Description |
---|---|---|
closeButton: boolean | false | show close button |
timeOut: number | 5000 | time to live |
enableHtml: boolean | false | allow html in message; (UNSAFE) |
extendedTimeOut: number | 1000 | time to close after a user hovers over toast |
progressBar: boolean | false | show progress bar |
toastClass: string | 'toast' | class on toast |
positionClass: string | 'toast-top-right' | class on toast |
titleClass: string | 'toast-title' | class inside toast on title |
messageClass: string | 'toast-message' | class inside toast on message |
tapToDismiss: boolean | true | close on click |
Example:
showSuccess() {
const options: ToastConfig = { closeButton: true, tapToDismiss: false, titleClass: 'yellow' };
this.toastrService.success('Hello world!', 'Toastr success!', options);
}
showError() {
const options: ToastConfig = { enableHtml: false, positionClass: 'toast-bottom-right' };
this.toastrService.error('Error message
', 'Toastr error!', options);
}
showInfo() {
const options: ToastConfig = { extendedTimeOut: 30000, messageClass: 'pink' };
this.toastrService.info('Info message', 'Toastr info!', options);
}
showWarning() {
const options: ToastConfig = { progressBar: true, timeOut: 3000, toastClass: 'black'};
this.toastrService.warning('Warnig message', 'Toastr warning!', options);
}