Sign in


Sign up


Angular Bootstrap alertsMDB Pro 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.

Toast service requires either BrowserAnimationsModule or NoopAnimationsModule modules. Please import them to your app.module.ts.


Examples

Info message Warning message Success message Error message

<!--Info message-->
<a class="btn btn-info waves-light" (click)="showInfo()" mdbRippleRadius>Info message</a>
<!--Warning message-->
<a class="btn btn-warning waves-light" (click)="showWarning()" mdbRippleRadius>Warning message</a>
<!--Success message-->
<a class="btn btn-success waves-light" (click)="showSuccess()" mdbRippleRadius>Success message</a>
<!--Error message-->
<a class="btn btn-danger waves-light" (click)="showError()" mdbRippleRadius>Error message</a>

Data structure:


import { Component } from '@angular/core';
import { ToastService } from 'your_path_to/typescripts/pro';

@Component({
  selector: 'toast-component-example',
  templateUrl: 'toast.component.html',
})

export class ToastComponent  {

  constructor(private toastrService: ToastService) {}

  showSuccess() {
    this.toastrService.success('Info message');
  }

  showError() {
    this.toastrService.error('Warning message');
  }

  showInfo() {
    this.toastrService.info('Success message');
  }

  showWarning() {
    this.toastrService.warning('Error message');
  }

}
      

Important update!

Since version 4.3.7 , Toast Service has to be imported separately as singleton to avoid circular dependencies.

Import Toast Service as singleton:

app.module.ts

import { ToastModule } from 'ng-mdb-pro/pro/alerts';
...

imports: [
...
ToastModule.forRoot(),
...
],
                
app.component.ts

import {ToastService} from '../../typescripts/pro/alerts' 
...
constructor(
...
private toast: ToastService
...
) { }

Sample usage:


ngOnInit() {
    setTimeout(
    () => this.toast.info("It works!")
    );
}
                

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() { 
  let options = { closeButton: true, tapToDismiss: false,  titleClass: 'yellow' };
  this.toastrService.success('Hello world!', 'Toastr success!', options);
}
  
showError() {
  let options = { enableHtml: false,  positionClass: 'toast-bottom-right' };
  this.toastrService.error('Error message', 'Toastr error!', options);
}

showInfo() {
  let options = { extendedTimeOut: 30000, messageClass: 'pink' };
  this.toastrService.info('Info message', 'Toastr info!', options);
}

showWarning() {
  let options = { progressBar: true,  timeOut: 3000,  toastClass: 'black'};
  this.toastrService.warning('Warnig message', 'Toastr warning!', options);
}