Alerts

Angular Bootstrap 5 Alerts component

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

Provide contextual feedback messages for typical user actions with the 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 show 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



Additional Content


Dismissing


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


        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 { NotificationComponent } from 'your-path-to-notification-component';
          import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

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

            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(NotificationComponent, 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-modal-component';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          modalRef: MdbModalRef<ModalComponent>;

          constructor(private modalService: MdbModalService) {}

          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 { NotificationComponent } from 'your-path-to-notification-component';
        import { MdbNotificationRef, MdbNotificationService } from 'mdb-angular-ui-kit/notification';

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

          constructor(private notificationService: MdbNotificationService) {}

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