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.


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';

  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() {'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:


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

imports: [

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

Sample usage:

ngOnInit() {
    () =>"It works!")


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.

Global options for alerts need to be set in ToastModule.forRoot({}) in imports: [] array located in app.module.ts

For example, global options that allows only 2 alerts be visible at time should looks in this way: ToastModule.forRoot({maxOpened: 2})

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. Note that if you want to add your custom class, you have to put it in your's global stylesheet - styles.scss
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


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' };'Info message', 'Toastr info!', options);

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