Toasts

Angular Bootstrap 5 Toast component

Responsive Toast built with Bootstrap 5, Angular and Material Design. 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

        
            
            <div
              class="toast bg-primary mx-auto"
              id="basic-primary-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
            >
              <div class="toast-header text-white bg-primary">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button
                  type="button"
                  class="btn-close btn-close-white"
                  aria-label="Close"
                  (click)="notificationRef.close()"
                ></button>
              </div>
              <div class="toast-body text-white">Primary Basic Example</div>
            </div>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbNotificationRef } from 'mdb-angular-ui-kit/notification';

            @Component({
              selector: 'app-toast',
              templateUrl: './toast.component.html',
            })
            export class ToastComponent {
              constructor(public notificationRef: MdbNotificationRef<ToastComponent>) {}
            }

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

        
            
            <button class="btn btn-primary" (click)="openToast()">Open</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
            import { ToastComponent } from 'your-path-to-toast-component';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              notificationRef: MdbNotificationRef<ToastComponent> | null = null;

              constructor(private notificationService: MdbNotificationService) {}

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

Inject and receive data

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

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

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            notificationRef: MdbNotificationRef<ToastComponent> | null = null;

            constructor(private notificationService: MdbNotificationService) {}

            openToast() {
              this.notificationRef = this.notificationService.open(ToastComponent, { data: { text: 'Toast text'} });
            }
          }

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

        
            
          <div
          class="toast bg-primary mx-auto"
          id="basic-primary-example"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div class="toast-header text-white bg-primary">
            <strong class="me-auto">MDBootstrap</strong>
            <small>11 mins ago</small>
            <button
              type="button"
              class="btn-close btn-close-white"
              aria-label="Close"
              (click)="notificationRef.close()"
            ></button>
          </div>
          <div class="toast-body text-white">{{ text }}</div>
        </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbNotificationRef } from 'mdb-angular-ui-kit/notification';

          @Component({
            selector: 'app-toast',
            templateUrl: './toast.component.html',
          })
          export class ToastComponent {
            text: string | null = null;

            constructor(public notificationRef: MdbNotificationRef<ToastComponent>) {}
          }

Receive data from the toast

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

        
            
          <div class="alert alert-primary" role="alert">
            A simple primary toast with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              (click)="close()"
            ></button>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbNotificationRef } from 'mdb-angular-ui-kit/notification';

          @Component({
            selector: 'app-toast',
            templateUrl: './toast.component.html',
          })
          export class ToastComponent {
            constructor(public notificationRef: MdbNotificationRef<ToastComponent>) {}
            close(): void {
              const closeMessage = 'Toast closed';
              this.notificationRef.close(closeMessage)
            }
          }

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

        
            
          <button class="btn btn-primary" (click)="openToast()">Open</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
          import { ToastComponent } from 'your-path-to-toast-component';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            notificationRef: MdbNotificationRef<ToastComponent> | null = null;

            constructor(private notificationService: MdbNotificationService) {}

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

Static example

        
            
            <div
              class="toast mx-auto"
              id="static-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
            >
              <div class="toast-header bg-light">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button
                  type="button"
                  class="btn-close"
                  aria-label="Close"
                  (click)="notificationRef.close()"
                ></button>
              </div>
              <div class="toast-body bg-light">Static Example</div>
            </div>

Colors

Create different toast color schemes with our color and background utilities.

        
            
            <div class="row mb-5">
              <div class="col-xl-3 col-lg-6">
                <div
                  class="toast text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                >
                  <div class="toast-header bg-info text-white">
                    <i class="fas fa-info-circle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button
                      type="button"
                      class="btn-close btn-close-white"
                      aria-label="Close"
                      (click)="notificationRef.close()"
                    ></button>
                  </div>
                  <div class="toast-body bg-info">Hello, world! This is a toast message.</div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-6">
                <div
                  class="toast text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                >
                  <div class="toast-header text-white bg-warning">
                    <i class="fas fa-exclamation-triangle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button
                      type="button"
                      class="btn-close btn-close-white"
                      aria-label="Close"
                      (click)="notificationRef.close()"
                    ></button>
                  </div>
                  <div class="toast-body bg-warning">Hello, world! This is a toast message.</div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-6">
                <div
                  class="toast text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                >
                  <div class="toast-header text-white bg-success">
                    <i class="fas fa-check fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button
                      type="button"
                      class="btn-close btn-close-white"
                      aria-label="Close"
                      (click)="notificationRef.close()"
                    ></button>
                  </div>
                  <div class="toast-body bg-success">Hello, world! This is a toast message.</div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-6">
                <div
                  class="toast text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                >
                  <div class="toast-header text-white bg-danger">
                    <i class="fas fa-exclamation-circle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button
                      type="button"
                      class="btn-close btn-close-white"
                      aria-label="Close"
                      (click)="notificationRef.close()"
                    ></button>
                  </div>
                  <div class="toast-body bg-danger">Hello, world! This is a toast message.</div>
                </div>
              </div>
            </div>

Placement

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

Select horizontal / vertical alignment

Current position: top-right
        
            
            <button class="btn btn-primary" (click)="openToast()">Open</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
            import { ToastComponent } from 'your-path-to-toast-component';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              notificationRef: MdbNotificationRef<ToastComponent> | null = null;

              constructor(private notificationService: MdbNotificationService) {}

              openToast() {
                this.notificationRef = this.notificationService.open(ToastComponent, {
                  position: 'top-right'
                });
              }
            }

Offset

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

        
            
            <button class="btn btn-primary" (click)="openToast()">Open</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
            import { ToastComponent } from 'your-path-to-toast-component';
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              notificationRef: MdbNotificationRef<ToastComponent> | null = null;

              constructor(private notificationService: MdbNotificationService) {}

              openToast() {
                this.notificationRef = this.notificationService.open(ToastComponent, {
                  offset: '100'
                });
              }
            }

Stacking

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

        
            
            <button class="btn btn-primary" (click)="openToast()">Open</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
            import { ToastComponent } from 'your-path-to-toast-component';
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              notificationRef: MdbNotificationRef<ToastComponent> | null = null;

              constructor(private notificationService: MdbNotificationService) {}

              openToast() {
                this.notificationRef = this.notificationService.open(ToastComponent, {
                  stacking: true
                });
              }
            }

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 { ToastComponent } from 'your-path-to-toast-component';
            import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

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

              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(ToastComponent, 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-toast-component';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              notificationRef: MdbNotificationRef<ToastComponent> | null = null;

              constructor(private notificationService: MdbNotificationService) {}

              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 { ToastComponent } from 'your-path-to-toast-component';
          import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

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

            constructor(private notificationService: MdbNotificationService) {}

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