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