Angular Bootstrap Modal Events

Angular Modal Events - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap modal events are a set of events that are emitted by the component when it is opened or closed.

"open" event

This event is fired just before the modal is open.

Launch Modal Success

Show code

HTML
Typescript

<button type="button" mdbBtn color="primary" rounded="true" data-toggle="modal" data-target="#basicExample"
  (click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" (open)="onOpen($event)">
  <div class="modal-dialog modal-notify modal-success" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading lead">Modal Success</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">
        <div class="text-center">
          <mdb-icon fas icon="check" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
            ad consequatur
            in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis
            totam.</p>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Get it now
          <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
        </a>
        <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()"
          data-dismiss="modal">No, thanks</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onOpen(event: any) {
    console.log(event);
  }
}

"opened" event

This event is fired after the modal is opened.

Launch Modal Info

Show code

HTML
Typescript

<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
  (click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" (opened)="onOpened($event)">
  <div class="modal-dialog modal-notify modal-info modal-side modal-top-left" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading lead">Modal Info</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">
        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.webp" alt=""
          class="img-fluid">
        <div class="text-center">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="primary" class="waves-effect" mdbWavesEffect>Get it now
          <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
        </a>
        <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()"
          data-dismiss="modal">No, thanks</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onOpened(event: any) {
    console.log(event);
  }
}

"close" event

This event is fired just before the modal is closed.

Launch Modal Danger

Show code

HTML
Typescript

<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
  (click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" (close)="onClose($event)">
  <div class="modal-dialog modal-notify modal-danger modal-side modal-top-right" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading">Modal Danger</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">
        <div class="row">
          <div class="col-3">
            <p></p>
            <p class="text-center">
              <mdb-icon fas icon="shopping-cart" size="4x"></mdb-icon>
            </p>
          </div>
          <div class="col-9">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
              sunt earum.</p>
            <h2>
              <mdb-badge danger="true">v52gs1</mdb-badge>
            </h2>
          </div>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="primary" class="waves-effect" mdbWavesEffect>Get it now
          <mdb-btn far icon="gem" class="ml-1"></mdb-btn>
        </a>
        <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()"
          data-dismiss="modal">No, thanks</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onClose(event: any) {
    console.log(event);
  }
}

"closed" event

This event is fired after the modal is closed.

Launch Modal Warning

Show code

HTML
Typescript

<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
  (click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" (closed)="onClosed($event)">
  <div class="modal-dialog modal-notify modal-warning modal-side modal-bottom-left" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading">Modal Warning</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">
        <div class="row">
          <div class="col-3 text-center">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp" alt="Michal Szymanski - founder of Material Design for Bootstrap"
              class="img-fluid z-depth-1-half rounded-circle">
            <div style="height: 10px"></div>
            <p class="title mb-0">Jane</p>
            <p class="text-muted " style="font-size: 13px">Consultant</p>
          </div>
          <div class="col-9">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
              sunt earum.</p>
            <p class="card-text">
              <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>
            </p>
          </div>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center waves-effect" mdbWavesEffect>
        <a type="button" mdbBtn color="primary">Get it now
          <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
        </a>
        <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()"
          data-dismiss="modal">No, thanks</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onClosed(event: any) {
    console.log(event);
  }
}

Angular Modals - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of modals component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

Show code

Pro
Free

import { ModalModule, ButtonsModule, WavesModule } from 'ng-uikit-pro-standard';

import { ModalModule, ButtonsModule, WavesModule } from 'angular-bootstrap-md';

Import example Modules list

Directive

mdbModal

Selector: mdbModal

Type: ModalDirective

Inputs

Name	Type	Default	Description	Example
`[config]`	ModalOptions	{ }	allows to set modal configuration via element property	`[config]="{backdrop: false}"`

ModalOptions

Name	Type	Default	Description	Example
`[config]`	ModalOptions	{ }	allows to set modal configuration via element property	`[config]="{backdrop: false}"`
`backdrop`	boolean \| "static"	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.	`[config]="{backdrop: false}"`
`ignoreBackdropClick`	boolean	false	Ignore the backdrop click.	`[config]="{ignoreBackdropClick: true}"`
`keyboard`	boolean	true	Closes the modal when the escape key is pressed.	`[config]="{keyboard: false}"`
`show`	boolean	false	Shows the modal when initialized.	`[config]="{show: true}"`
`class`	string	' '	Css class for opened modal.	`[config]="{class: 'custom-class'}"`

Outputs

Name	Type	Description	Example
`closed`	EventEmitter<ModalDirective>	Event is fired when the modal has finished being hidden from the user.	`(closed)="onClosed($event)"`
`close`	EventEmitter<ModalDirective>	Event is fired instantly when the hide instance method has been called.	`(close)="onClose($event)"`
`open`	EventEmitter<ModalDirective>	Event fires instantly when the show instance method is called.	`(open)="onOpen($event)"`
`opened`	EventEmitter<ModalDirective>	Event is fired when the modal has been made visible to the user.	`(opened)="onOpened($event)"`

Methods

In below table you can find every method which is available in ModalDirective.

Name	Description
`(event)="name.show()"`	Allows to manually open modal.
`(event)="name.hide()"`	Allows to manually close modal.
`(event)="name.toggle(value: boolean)()"`	Allows to manually toggle modal visibility.
`(event)="name.focusOtherModal()"`	Events tricks.