Angular Bootstrap alerts MDB 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
orNoopAnimationsModule
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()" mdbWavesEffect>Info message</a>
<!--Warning message-->
<a class="btn btn-warning waves-light" (click)="showWarning()" mdbWavesEffect>Warning message</a>
<!--Success message-->
<a class="btn btn-success waves-light" (click)="showSuccess()" mdbWavesEffect>Success message</a>
<!--Error message-->
<a class="btn btn-danger waves-light" (click)="showError()" mdbWavesEffect>Error message</a>
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.
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 |
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);
}
API Refference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Refference for MDB Angular Alerts:
import { ToastModule } from 'ng-uikit-pro-standard'
Check how you should import MDB Angular modules:
Import example