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.
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with
an example link. Give it a click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with
an example link. Give it a click if you like.
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.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<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>
Link Color
Use .alert-link class to create matching colored links inside the alert box.
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with an example link. Give it a
click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a
click if you like.
<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>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a
click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a
click if you like.
</div>
Additional Content
'Alerts can contain additional elements like headings, paragraphs and dividers.
Well done!
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<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.
Holy guacamole! You should check in on some of those fields below.
<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
Show me wherever you want!
<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.
Offset: 100px
<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;