Angular Bootstrap Modal Events

Angular Modal Events - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.

        
            
          <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.

        
            
          <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.

        
            
          <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.

        
            
          <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.

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

Directive

mdbModal

Selector: mdbModal

Type: ModalDirective


Inputs

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.