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
2. Inject MdbNotificationService
to the component from which you want to open the
alert and use the open
method.
Inject and receive data
You can inject data to the alert by passing it to the data
parameter in the alert
options.
Here is an example showing how to use injected data in the alert component:
Receive data from the alert
You can receive data from the alert to use it in other components:
Here is an example showing how to use data received from alert in other components
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.
Link Color
Use .alert-link
class to create matching colored links inside the alert box.
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.
Dismissing
It’s possible to dismiss any alert inline.
Placement
You can set the position of every alert using the
position
option.
Select horizontal / vertical alignment
Current position: top-right
Offset
You can set offset of your alert using a offset
option.
Stacking
You can turn on stacking your alerts using the
stacking
oprion.
Alerts - API
Import
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 |
Methods
MdbNotificationService
Name | Description |
---|---|
open |
Opens alert |
MdbNotificationRef
Method | Description |
---|---|
onClose: Observable<any> |
Returns observable on alert close. |
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.