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-->
<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:

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

imports: [
...
ToastModule.forRoot(),
...
],
                

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.

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)

ToastConfig (Individual Toast options)

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