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

Show code

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

Show code

Inject and receive data

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

Show code

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

Show code

Receive data from the alert

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

Show code

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

Show code

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.

Show code

Additional Content

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

Show code

Dismissing

It’s possible to dismiss any alert inline.

Show code

Placement

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

Select horizontal / vertical alignment

Current position: top-right
Show code

Offset

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

Show code

Stacking

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

Show code