Toasts

Angular Bootstrap 5 Toast component

Bootstrap Toast built with Bootstrap 5, Angular 11 and Material Design 2.0. Non-disruptive notification message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable toast message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization


Basic example

Click the buttons to launch the toasts.

You can create toast dynamically from any component using a built-in service. To achieve this, follow these steps:

1. Create a new component with Angular CLI and add some HTML code to the template.

ng generate component toast

2. Inject MdbNotificationService to the component from which you want to open the toast and use the open method.


Inject and receive data

You can inject data to the toast by passing it to the data parameter in the toast options.

Here is an example showing how to use injected data in the toast component:

Receive data from the toast

You can receive data from the toast to use it in other components:

Here is an example showing how to use data received from toast in other components


Static example


Colors


Placement

You can set position of every notification using data-mdb-position attribute or update() method.

Select horizontal / vertical alignment

Current position: top-right

Offset

You can also change offset of every notification using data-mdb-offset attribute or update() method.


Stacking

You can turn on/off stacking your notifications using data-mdb-stacking attribute or update() method.

Toasts - API


Import


        import { MdbNotificationModule } from 'mdb-angular-ui-kit/notification';
        …
        @NgModule ({
          ...
          imports: [MdbNotificationModule],
          ...
        })
      

Options

Name Type Default Description
position string 'top-right' Sets a position for the toast - top-left | top-right | bottom-left | bottom-right
delay number 5000 Sets the length of animation delay
autohide boolean false Toast will hide automatically or not
width string 'unset' Sets width of toast
offset number 10 Defines offset of the element
stacking boolean false Enables stacking toasts

          <button class="btn btn-primary" (click)="openToast()">Open toast</button>
        

          import { Component } from '@angular/core';
          import { NotificationComponent } from 'your-path-to-notification-component';
          import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

          @Component({
              selector: 'create-dynamic-toast',
              templateUrl: './create-dynamic-toast.component.html',
          })
          export class AppComponent {
            toastRef: MdbNotificationRef<ToastComponent>;

            config = {
              position: 'top-left',
              width: 100,
              delay: 1000,
              autohide: true,
              stacking: true,
              offset: 100,
              animation: false,
              data: {
                text: 'example text'
              },
            }

            constructor(private notificationService: MdbNotificationService) {}

            openToast() {
              this.notificationRef = this.notificationService.open(NotificationComponent, this.config);
            }
          }
        

Methods

MdbNotificationService

Name Description
open Opens toast

        <button class="btn btn-primary" (click)="openToast()">Open toast</button>
      

        import { Component } from '@angular/core';
        import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
        import { ToastComponent } from 'your-path-to-modal-component';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          modalRef: MdbModalRef<ModalComponent>;

          constructor(private modalService: MdbModalService) {}

          openToast() {
            this.notificationRef = this.notificationService.open(ToastComponent);
          }
        }
      

MdbNotificationRef

Method Description
onClose: Observable<any> Returns observable on toast close.

        <button class="btn btn-primary" (click)="openToast()">Open toast</button>
      

        import { Component } from '@angular/core';
        import { NotificationComponent } from 'your-path-to-notification-component';
        import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

        @Component({
            selector: 'create-dynamic-toast',
            templateUrl: './create-dynamic-toast.component.html',
        })
        export class AppComponent {
          toastRef: MdbNotificationRef<ToastComponent>;

          constructor(private notificationService: MdbNotificationService) {}

          openToast() {
            this.notificationRef = this.notificationService.open(NotificationComponent);
            this.notificationRef.onClose.subscribe((message: any) => {
              console.log(message);
            });
          }
        }