Angular Bootstrap Modal Events

Angular Modal Events - Bootstrap 4 & Material Design

Angular Bootstrap modal events is 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.

HTML
TS


        <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">
                  <i class="fas 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="far fa-gem 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 {
        onOpen(event: any) {
          console.log(event);
        }
        }

"opened" event

This event is fired after the modal is opened.

Launch Modal Info

HTML
TS


        <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.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="far fa-gem 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 {
        onOpened(event: any) {
          console.log(event);
        }
        }

"close" event

This event is fired just before the modal is closed.

Launch Modal Danger

HTML
TS


        <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">
                      <i class="fas 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="far fa-gem 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 {
        onClose(event: any) {
          console.log(event);
        }
        }

"closed" event

This event is fired after the modal is closed.

Launch Modal Warning

HTML
TS


        <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).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="far fa-gem 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 {
        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.

// MDB Angular Pro
    import { ModalModule, ButtonsModule, WavesModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
    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.