Using modals in Angular

Author: Dawid Adach

-

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
  2. 
    import {Component, ViewChild} from '@angular/core';
    import {ModalDirective} from 'angular-bootstrap-md';
      
  3. Define the @ViewChild element within the AppComponent class
  4. 
    export class AppComponent {
      @ViewChild(ModalDirective) modal: ModalDirective;
    ...
    }
      
  5. Add a modal template at the end of the app.component.html file:
  6. 
    
    <!--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.

  7. Update the Add event button with modal call:
  8. 
            <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:

    
    
    <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-->
    
      
  9. Run and test the app
  10. Modal Demo

    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.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits