Angular Bootstrap Modal Form

Angular Modal Form - Bootstrap 4 & Material Design

Angular Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - drop of UX and frustrating your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .

See also: Modal Core Documentation, Modal Styles and Modal Templates.

Simple modal login

Launch Modal Login Form

Sign in


        <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">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="defaultForm-email" [formControl]="loginFormModalEmail" class="form-control validate"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword" class="form-control validate"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
              </div>
            </div>
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        loginFormModalEmail = new FormControl('', Validators.email);
        loginFormModalPassword = new FormControl('', Validators.required);
        }

Simple modal register

Launch Modal Register Form

Sign up


        <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">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="orangeForm-name" class="form-control validate" [formControl]="signupFormModalName"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
                </div>
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="orangeForm-email" class="form-control validate" [formControl]="signupFormModalEmail"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="orangeForm-pass" class="form-control validate" [formControl]="signupFormModalPassword"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect>Sign up</button>
              </div>
            </div>
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        signupFormModalName = new FormControl('', Validators.required);
        signupFormModalEmail = new FormControl('', Validators.email);
        signupFormModalPassword = new FormControl('', Validators.required);
        }

Simple modal subscription

Launch Modal Subscription Form

Subscribe


        <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">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control validate" [formControl]="subscriptionFormModalName"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control validate" [formControl]="subscriptionFormModalEmail"
                    mdbInput>
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button mdbBtn color="indigo" class="waves-light" mdbWavesEffect>Send
                  <i class="far fa-paper-plane ml-1"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        subscriptionFormModalName = new FormControl('', Validators.required);
        subscriptionFormModalEmail = new FormControl('', Validators.email);
        }

Simple modal contact

Launch Modal Contact Form

Write to us


        <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">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form34" class="form-control validate" mdbInput [formControl]="contactFormModalName">
                  <label data-error="wrong" data-success="right" for="form34">Your name</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form29" class="form-control validate" mdbInput [formControl]="contactFormModalEmail">
                  <label data-error="wrong" data-success="right" for="form29">Your email</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-tag prefix grey-text"></i>
                  <input type="text" id="form32" class="form-control validate" mdbInput [formControl]="contactFormModalSubject">
                  <label data-error="wrong" data-success="right" for="form32">Subject</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-pencil-alt prefix grey-text"></i>
                  <textarea type="text" id="form8" class="md-textarea form-control" rows="1" mdbInput
                    [formControl]="contactFormModalMessage"></textarea>
                  <label data-error="wrong" data-success="right" for="form8">Your message</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button mdbBtn color="unique" class="waves-light" mdbWavesEffect>Send
                  <i class="far fa-paper-plane ml-1"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        contactFormModalName = new FormControl('', Validators.required);
        contactFormModalEmail = new FormControl('', Validators.email);
        contactFormModalSubject = new FormControl('', Validators.required);
        contactFormModalMessage = new FormControl('', Validators.required);
        }

Cascading modal register / login MDB Pro component

Launch Modal LogIn/Register

Not a member? Sign Up

Forgot Password?

Already have an account? Log In 


        <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 top" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog cascading-modal" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Modal cascading tabs-->
              <div class="modal-c-tabs">

                <!-- Tab panels -->
                <mdb-tabset #staticTabs [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'" [contentClass]="''"
                  class="tab-content">
                  <!--Panel 7-->
                  <mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel" heading="<i class='fas fa-user mr-1'></i> Login">

                    <!--Body-->
                    <div class="modal-body mb-1">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input mdbInput type="text" id="form22" class="form-control" [formControl]="modalFormLoginEmail">
                        <label for="form22">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input mdbInput type="password" id="form23" class="form-control" [formControl]="modalFormLoginPassword">
                        <label for="form23">Your password</label>
                      </div>
                      <div class="text-center mt-2">
                        <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Log in
                          <i class="fas fa-sign-in-alt ml-1"></i>
                        </button>
                      </div>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer display-footer">
                      <div class="options text-center text-md-right mt-1">
                        <p>Not a member?
                          <a href="#" class="blue-text">Sign Up</a>
                        </p>
                        <p>Forgot
                          <a href="#" class="blue-text">Password?</a>
                        </p>
                      </div>
                      <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
                        (click)="frame.hide()" mdbWavesEffect>Close</button>
                    </div>

                  </mdb-tab>
                  <!--/.Panel 7-->

                  <!--Panel 8-->
                  <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading="<i class='fas fa-user-plus mr-1'></i> Register">

                    <!--Body-->
                    <div class="modal-body">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input mdbInput type="text" id="form24" class="form-control" [formControl]="modalFormRegisterEmail">
                        <label for="form24">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input mdbInput type="password" id="form25" class="form-control" [formControl]="modalFormRegisterPassword">
                        <label for="form25">Your password</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input mdbInput type="password" id="form26" class="form-control" [formControl]="modalFormRegisterRepeatPassword">
                        <label for="form26">Repeat password</label>
                      </div>

                      <div class="text-center form-sm mt-2">
                        <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Sign up
                          <i class="fas fa-sign-in-alt ml-1"></i>
                        </button>
                      </div>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-right">
                        <p class="pt-1">Already have an account?
                          <a href="#" class="blue-text">Log In</a>
                        </p>
                      </div>
                      <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
                        (click)="frame.hide()" mdbWavesEffect>Close</button>
                    </div>
                  </mdb-tab>
                  <!--/.Panel 8-->
                </mdb-tabset>

              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        modalFormLoginEmail = new FormControl('', Validators.email);
        modalFormLoginPassword = new FormControl('', Validators.required);
        modalFormRegisterEmail = new FormControl('', Validators.email);
        modalFormRegisterPassword = new FormControl('', Validators.required);
        modalFormRegisterRepeatPassword = new FormControl('', Validators.required);
        }

Modal with avatar

Launch Modal Login with Avatar
avatar
Maria Doe

        <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 top" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Header-->
              <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" class="rounded-circle img-responsive">
              </div>
              <!--Body-->
              <div class="modal-body mb-1">

                <h5 class="mt-1 mb-2 text-center">Maria Doe</h5>

                <div class="md-form ml-0 mr-0">
                  <input type="password" type="text" id="form29" class="form-control form-control-sm ml-0"
                    mdbInput [formControl]="modalFormAvatarPassword">
                  <label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center mt-4">
                  <button mdbBtn color="cyan" rounded="true" class="mt-1 waves-light" mdbWavesEffect>Login
                    <i class="fas fa-sign-in-alt ml-1"></i>
                  </button>
                </div>
              </div>

            </div>
            <!--/.Content-->
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        modalFormAvatarPassword = new FormControl('', Validators.required);
        }

Subscription modal with orange header

Launch modal Subscription

Subscribe

Send 

        <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 top" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-notify modal-warning" 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">Subscribe</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">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control" mdbInput [formControl]="modalFormSubscriptionName">
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control" mdbInput [formControl]="modalFormSubscriptionEmail">
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" mdbBtn color="warning" outline="true" class="waves-effect" mdbWavesEffect>Send
                  <i class="far fa-paper-plane ml-1"></i>
                </a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
        modalFormSubscriptionName = new FormControl('', Validators.required);
        modalFormSubscriptionEmail = new FormControl('', Validators.email);
        }
      

        .modal-notify .modal-header {
        border-radius: 3px 3px 0 0;
        }
        .modal-notify .modal-content {
        border-radius: 3px;
        }

Elegant modal login MDB Pro component

Launch modal Login Form

Sign in

Forgot Password?

or Sign in with:

Not a member? Sign Up 


        <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 top" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content form-elegant">
              <!--Header-->
              <div class="modal-header text-center">
                <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel">
                  <strong>Sign in</strong>
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <!--Body-->
              <div class="modal-body mx-4">
                <!--Body-->
                <div class="md-form mb-5">
                  <input type="email" id="Form-email1" class="form-control" mdbInput [formControl]="modalFormElegantEmail">
                  <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control" mdbInput [formControl]="modalFormElegantPassword">
                  <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot
                    <a href="#" class="blue-text ml-1"> Password?</a>
                  </p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" mdbBtn gradient="blue" block="true" rounded="true" class="z-depth-1a waves-light"
                    mdbWavesEffect>Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light"
                    mdbWavesEffect>
                    <i class="fab fa-facebook-f text-center"></i>
                  </button>
                  <!--Twitter-->
                  <button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light"
                    mdbWavesEffect>
                    <i class="fab fa-twitter"></i>
                  </button>
                  <!--Google +-->
                  <button type="button" mdbBtn color="white" rounded="true" class="z-depth-1a waves-light"
                    mdbWavesEffect>
                    <i class="fab fa-google-plus"></i>
                  </button>
                </div>
              </div>
              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member?
                  <a href="#" class="blue-text ml-1"> Sign Up</a>
                </p>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
        selector: 'modal-form',
        templateUrl: './modal-form.component.html',
        styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
          modalFormElegantEmail = new FormControl('', Validators.email);
          modalFormElegantPassword = new FormControl('', Validators.required);
        }
      

        .form-elegant .font-small {
        font-size: 0.8rem; }

        .form-elegant .z-depth-1a {
        -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
        box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

        .form-elegant .z-depth-1-half,
        .form-elegant .btn:hover {
        -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
        box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

        .form-elegant .modal-header {
        border-bottom: none; }

        .modal-dialog .form-elegant .btn .fa {
        color: #2196f3!important; }

        .form-elegant .modal-body, .form-elegant .modal-footer {
        font-weight: 400; }

Dark modal register MDB Pro component

Launch modal register Form

SIGN UP

Have an account? Log in 


        <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 top" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog form-dark" role="document">
            <!--Content-->
            <div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                <!--Header-->
                <div class="modal-header text-center pb-4">
                  <h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel">
                    <strong>SIGN</strong>
                    <a class="green-text font-weight-bold">
                      <strong> UP</strong>
                    </a>
                  </h3>
                  <button type="button" class="close white-text" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <!--Body-->
                  <div class="md-form mb-5">
                    <input type="email" id="Form-email5" class="form-control white-text" mdbInput
                      [formControl]="modalFormDarkEmail">
                    <label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
                  </div>

                  <div class="md-form pb-3">
                    <input type="password" id="Form-pass5" class="form-control white-text" mdbInput
                      [formControl]="modalFormDarkPassword">
                    <label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
                    <div class="form-group mt-4">
                      <input class="form-check-input" type="checkbox" id="checkbox624">
                      <label for="checkbox624" class="white-text form-check-label">Accept the
                        <a href="#" class="green-text font-weight-bold"> Terms and Conditions</a>
                      </label>
                    </div>
                  </div>

                  <!--Grid row-->
                  <div class="row d-flex align-items-center mb-4">

                    <!--Grid column-->
                    <div class="text-center mb-3 col-md-12">
                      <button type="button" mdbBtn color="success" block="true" rounded="true" class="z-depth-1 waves-light"
                        mdbWavesEffect>Sign up</button>
                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-md-12">
                      <p class="font-small white-text d-flex justify-content-end">Have an account?
                        <a href="#" class="green-text ml-1 font-weight-bold"> Log in</a>
                      </p>
                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

        import { Component } from '@angular/core';
        import { FormControl, Validators } from '@angular/forms';

        @Component({
          selector: 'modal-form',
          templateUrl: './modal-form.component.html',
          styleUrls: ['./modal-form.component.css']
        })
        export class ModalFormComponent {
          modalFormDarkEmail = new FormControl('', Validators.email);
          modalFormDarkPassword = new FormControl('', Validators.required);
        }
      

        .form-dark .font-small {
        font-size: 0.8rem; }

        .form-dark [type="radio"] + label,
        .form-dark [type="checkbox"] + label {
        font-size: 0.8rem; }

        .form-dark [type="checkbox"] + label:before {
        top: 2px;
        width: 15px;
        height: 15px; }

        .form-dark .md-form label {
        color: #fff; }

        .form-dark input[type=email]:focus:not([readonly]) {
        border-bottom: 1px solid #00C851;
        -webkit-box-shadow: 0 1px 0 0 #00C851;
        box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=email]:focus:not([readonly]) + label {
        color: #fff; }

        .form-dark input[type=password]:focus:not([readonly]) {
        border-bottom: 1px solid #00C851;
        -webkit-box-shadow: 0 1px 0 0 #00C851;
        box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=password]:focus:not([readonly]) + label {
        color: #fff; }

        .form-dark input[type="checkbox"] + label:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 17px;
        height: 17px;
        z-index: 0;
        border: 1.5px solid #fff;
        border-radius: 1px;
        margin-top: 2px;
        -webkit-transition: 0.2s;
        transition: 0.2s; }

        .form-dark input[type="checkbox"]:checked + label:before {
        top: -4px;
        left: -3px;
        width: 12px;
        height: 22px;
        border-style: solid;
        border-width: 2px;
        border-color: transparent #00c851 #00c851 transparent;
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg);
        -webkit-backface-visibility: hidden;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%; }

        .form-dark .modal-header {
        border-bottom: none;
        }

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, TooltipModule, PopoverModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ModalModule, TooltipModule, PopoverModule, ButtonsModule } from 'angular-bootstrap-md'
// For Cascading Modal only
import { TabsModule } from 'ng-uikit-pro-standard'
// Forms and Reactive Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
Import example Modules list

Directive

mdbModal

Selector: mdbModal

Type: ModalDirective

Inputs

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.