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 the user extra content, configuration or consent request.

To use modals, just 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 the 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>

  

This is how your app.component.html file should look 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 a 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.