Angular Bootstrap Modal Events

Angular Bootstrap modal events is a set of JS scripts that let you launch Angular Bootstrap modals based on a action performed by a user.


"onShow" 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" (onShow)="onShow($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">
          <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
          <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
          <i class="fa fa-diamond ml-1"></i>
        </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 {
  onShow(event: any) {
    console.log(event);
  }
}
  

"onShown" event

This event is fired after the modal is shown.


<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" (onShown)="onShown($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.jpg" 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
          <i class="fa fa-diamond ml-1"></i>
        </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 {
  onShown(event: any) {
    console.log(event);
  }
}
  

"onHide" event

This event is fired just before the modal is hidden.


<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" (onHide)="onHide($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">
              <i class="fa fa-shopping-cart fa-4x"></i>
            </p>
          </div>

          <div class="col-9">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
            <h2>
              <span class="badge">v52gs1</span>
            </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
          <i class="fa fa-diamond ml-1"></i>
        </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 {
  onHide(event: any) {
    console.log(event);
  }
}
  

"onHidden" 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" (onHidden)="onHidden($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).jpg" 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
          <i class="fa fa-diamond ml-1"></i>
        </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 {
  onHidden(event: any) {
    console.log(event);
  }
}
  

API Reference:

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.

API Reference for MDB Angular Modals:
// MDB Angular Pro
import { ModalModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ModalModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'