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 toast-primary mx-auto"
  id="basic-primary-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
>
  <div class="toast-header toast-primary">
    <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">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 toast-primary mx-auto"
  id="basic-primary-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
>
  <div class="toast-header toast-primary">
    <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">{{ 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="toast toast-primary mx-auto"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
>
  <div class="toast-header toast-primary">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="close()"
    ></button>
  </div>
  <div class="toast-body">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>) {}
  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">
    <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">Static Example</div>
</div>

Colors

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

<div class="row justify-content-center">
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade toast-info"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-header toast-info">
        <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"
          aria-label="Close"
          (click)="notificationRef.close()"
        ></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade toast-warning"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-header toast-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"
          aria-label="Close"
          (click)="notificationRef.close()"
        ></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
</div>
<div class="row mb-2 justify-content-center">
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade toast-success"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-header toast-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"
          aria-label="Close"
          (click)="notificationRef.close()"
        ></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade toast-danger"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-header toast-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"
          aria-label="Close"
          (click)="notificationRef.close()"
        ></button>
      </div>
      <div class="toast-body">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 offset option. 

<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 stacking option. 

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

CSS variables

As part of MDB’s evolving CSS variables approach, toast now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .toast
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

--#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
--#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
--#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
--#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};

// .toast-container
--#{$prefix}toast-zindex: #{$zindex-toast};

SCSS variables

$toast-max-width: 350px;
$toast-font-size: 0.875rem;
$toast-color: null;
$toast-border-width: $border-width;
$toast-border-color: var(--#{$prefix}border-color-translucent);
$toast-spacing: $container-padding-x;

$toast-header-color: $gray-600;
$toast-header-border-color: rgba($black, 0.05);

$toast-box-shadow: $box-shadow-4;
$toast-border-radius: $border-radius-lg;
$toast-border-bottom-width: $border-width-alternate;
$toast-background-color: $white;
$toast-padding-x: 1rem;
$toast-padding-y: 0.65rem;
$toast-header-background-color: $white;
$toast-btn-close-width: 1.3em;
$toast-btn-close-mr: -0.375rem;
$toast-btn-close-ml: 0.75rem;