Alerts

Angular Bootstrap 5 Alerts component

Responsive Alerts built with Bootstrap 5, Angular and Material Design. Examples of alerts popup such as warning, error or confirmation messages boxes.

Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

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

Basic examples

Click the buttons to launch the alerts.

You can create alert 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 alert

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

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

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

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

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

  constructor(private notificationService: MdbNotificationService) {}

  openAlert() {
    this.notificationRef = this.notificationService.open(AlertComponent);
  }
}

Inject and receive data

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

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

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

  constructor(private notificationService: MdbNotificationService) {}

  openAlert() {
    this.notificationRef = this.notificationService.open(AlertComponent, { data: { text: 'Alert text'} });
  }
}

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

<div class="alert alert-primary" role="alert">
  {{ text }}
</div>
import { Component } from '@angular/core';
import { MdbNotificationRef } from 'mdb-angular-ui-kit/notification';

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

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

Receive data from the alert

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

<div class="alert alert-primary" role="alert">
  A simple primary alert with
  <a href="#" clas="alert-link" (click)=>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-alert',
  templateUrl: './alert.component.html',
})
export class AlertComponent {
  constructor(public notificationRef: MdbNotificationRef<AlertComponent>) {}

  close(): void {
    const closeMessage = 'Alert closed';
    this.notificationRef.close(closeMessage)
  }
}

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

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

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

  constructor(private notificationService: MdbNotificationService) {}

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

Static examples

Use .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark to create an alert.

<div class="alert alert-primary" role="alert">A simple primary alert - check it out!</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert - check it out!
</div>
<div class="alert alert-success" role="alert">A simple success alert - check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert - check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert - check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert - check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert - check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert - check it out!</div>

Additional Content

'

Alerts can contain additional elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>
    Aww yeah, you successfully read this important alert message. This example text is
    going to run a bit longer so that you can see how spacing within an alert works with
    this kind of content.
  </p>
  <hr />
  <p class="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
  </p>
</div>

Dismissing

It’s possible to dismiss any alert inline.

<div class="container">
  <div class="alert alert-warrning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button (click)="notificationRef.close()" type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

Placement

You can set the position of every alert using the position option.

Select horizontal / vertical alignment

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

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

  constructor(private notificationService: MdbNotificationService) {}

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

Offset

You can set offset of your alert using a offset option.

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

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

  constructor(private notificationService: MdbNotificationService) {}

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

Stacking

You can turn on stacking your alerts using the stacking oprion. 

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

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

  constructor(private notificationService: MdbNotificationService) {}

  openAlert() {
    this.notificationRef = this.notificationService.open(AlertComponent, {
      stacking: true
    });
  }
}

Alerts - 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 alert - top-left | top-right | bottom-left | bottom-right
delay number 5000 Sets the length of animation delay
autohide boolean false Alerts will hide automatically or not
width string 'unset' Sets width of alert
offset number 10 Defines offset of the element
stacking boolean false Enables stacking alerts 
<button class="btn btn-primary" (click)="openAlert()">Open alert</button>
import { Component } from '@angular/core';
import { AlertComponent } from 'your-path-to-alert-component';
import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

@Component({
    selector: 'create-dynamic-alert',
    templateUrl: './create-dynamic-alert.component.html',
})
export class AppComponent {
  notificationRef: MdbNotificationRef<AlertComponent> | 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) {}

  openAlert() {
    this.notificationRef = this.notificationService.open(AlertComponent, this.config);
  }
}

Methods

MdbNotificationService

Name Description
open Opens alert 
<button class="btn btn-primary" (click)="openAlert()">Open alert</button>
import { Component } from '@angular/core';
import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
import { AlertComponent } from 'your-path-to-alert-component';

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

  constructor(private notificationService: MdbNotificationService) {}

  openAlert() {
    this.notificationRef = this.notificationService.open(AlertComponent);
  }
}

MdbNotificationRef

Method Description
onClose: Observable<any> Returns observable on alert close. 
<button class="btn btn-primary" (click)="openAlert()">Open alert</button>
import { Component } from '@angular/core';
import { AlertComponent } from 'your-path-to-alert-component';
import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

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

  constructor(private notificationService: MdbNotificationService) {}

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

CSS variables

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

// .alert
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};

// .alert-fixed
--#{$prefix}alert-fixed-z-index: #{$zindex-alert};

SCSS variables

$alert-zindex: 1070;

$alert-padding-y: 1.25rem;
$alert-padding-x: 1.5rem;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius-lg;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3;