Using modals in Angular

In this lesson, we will learn how to use modals in our projects.

Note:
Modals are small pop up windows which are really handy when you want to display to user extra content, configuration or consent request.

To use modals, follow the steps below.

1. 1. Import the required ViewChild and Modal directives in app.component.ts
• app.component.ts
import {Component, ViewChild} from '@angular/core';
        import {ModalDirective} from 'angular-bootstrap-md';
2. Define the @ViewChild element within the AppComponent class
• app.component.ts
export class AppComponent {
          @ViewChild(ModalDirective) modal: ModalDirective;
        ...
        }
3. Add a modal template at the end of the app.component.html file:
• app.component.html
<!--Modal-->
        <div
          mdbModal
          #frame="mdbModal"
          class="modal fade top"
          id="frameModalTop"
          tabindex="-1"
          role="dialog"
          aria-labelledby="myModalLabel"
          aria-hidden="true"
          style="overflow-y: auto"
        >
          <!--Dialog-->
          <div class="modal-dialog modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header text-center">
                <h4 class="modal-title white-text w-100 font-weight-bold py-2">
                  Schedule appointment
                </h4>
                <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">
                Modal Body
              </div>
              <!--/.Body-->
        
              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <button
                  type="button"
                  mdbBtn
                  color="info"
                  class="waves-effect"
                  mdbWavesEffect
                >
                  Add
                </button>
              </div>
              <!--Footer-->
            </div>
            <!--/.Content-->
          </div>
          <!--/.Dialog-->
        </div>
        <!--/.Modal-->

Our modal is almost ready, the last thing we have to do is to display it. In order to do that we will use frame.show() function (which comes with ModalDirective) and bind it to the Add event button using (click) binding.

4. Update the Add event button with modal call:
• app.component.html
<a
          type="button"
          mdbBtn
          color="info"
          class="waves-effect mb-4"
          (click)="frame.show()"
          mdbWavesEffect
          >Add event
        </a>

That how your app.component.html file should looks like:

• app.component.html
<div class="container mt-3">
          <div class="row ">
            <div class="col-md-9">
              <div *ngFor="let event of events">
                <app-event
                  [value]="event"
                  (deleteEventInstanceEvent)="deleteEvent($event)"
                ></app-event>
              </div>
              <div class="text-center">
                <a
                  type="button"
                  mdbBtn
                  color="info"
                  class="waves-effect mb-4"
                  (click)="frame.show()"
                  mdbWavesEffect
                  >Add event
                </a>
              </div>
            </div>
            <div class="col-md-3">
              <h3 class="text-uppercase">Schedule</h3>
              <h6 class="my-3">
                It's going to be busy that today. You have
                <b> {{ events.length }} events </b> today.
              </h6>
              <h1 class="my-3">
                <div class="row">
                  <div class="col-3 text-center">
                    <mdb-icon fas icon="sun"></mdb-icon>
                  </div>
                  <div class="col-9 ">Sunny</div>
                </div>
                <div class="row">
                  <div class="col-3 text-center">
                    <mdb-icon fas icon="thermometer-three-quarters"></mdb-icon>
                  </div>
                  <div class="col-3 ">23°C</div>
                </div>
              </h1>
              <p>
                Don't forget your sunglasses. Today will dry and sunny, becoming warm in
                the afternoon with temperatures of between 20 and 25 degrees.
              </p>
            </div>
          </div>
        </div>
        
        <!--Modal-->
        <div
          mdbModal
          #frame="mdbModal"
          class="modal fade top"
          id="frameModalTop"
          tabindex="-1"
          role="dialog"
          aria-labelledby="myModalLabel"
          aria-hidden="true"
          style="overflow-y: auto"
        >
          <!--Dialog-->
          <div class="modal-dialog modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header text-center">
                <h4 class="modal-title white-text w-100 font-weight-bold py-2">
                  Add Event
                </h4>
                <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">
                Modal Body
              </div>
        
              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <button
                  type="button"
                  mdbBtn
                  color="info"
                  class="waves-effect"
                  mdbWavesEffect
                >
                  Add
                </button>
              </div>
              <!--Footer-->
            </div>
            <!--/.Content-->
          </div>
          <!--/.Dialog-->
        </div>
        <!--/.Modal-->
5. Run and test the app


Note:
Modals are great tools and they can be customized in various ways. Most probably you will use them to get user consent for using cookies or to accept a privacy policy on a website, display a registration/login form or some extra details like map and/or contact form.

You can find dozens of predefined modal templates in our docs.
You may also wish to check out our modal generator.