Rate this docs

Angular Bootstrap Modal examples & templates

Angular Modal Examples & Templates - Bootstrap 4 & Material Design

Angular Bootstrap modal examples & templates is a set of advanced modal examples which you can use in your project.

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

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

Click buttons below to launch modals demo


Modal Cookies


          <button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
            (click)="frame.show()" mdbWavesEffect>
            Bottom
          </button>

          <div mdbModal #frame="mdbModal" class="modal fade bottom modal-scrolling" id="frameModalTop" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
            <div class="modal-dialog modal-frame modal-bottom modal-notify modal-info" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body">
                  <div class="row d-flex justify-content-center align-items-center">

                    <p class="pt-3 pr-2">We use cookies to improve your website experience</p>

                    <a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Learn more
                      <i class="fa fa-book ml-1"></i>
                    </a>
                    <a type="button" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect
                      data-dismiss="modal" (click)="frame.hide()">Ok, thanks</a>
                  </div>
                </div>
              </div>
              <!--/.Content-->
            </div>
          </div>
        

Modal Coupon


          <button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
            (click)="frame.show()" mdbWavesEffect>
            LAUNCH MODAL
          </button>

          <div mdbModal #frame="mdbModal" class="modal fade top modal-scrolling" id="frameModalTop" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
            <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body">
                  <div class="row d-flex justify-content-center align-items-center">

                    <h2>
                      <span class="badge">v52gs1</span>
                    </h2>
                    <p class="pt-3 mx-4">We have a gift for you! Use this code to get a
                      <strong>10% discount</strong>.</p>

                    <a type="button" mdbBtn color="success" class="waves-light" mdbWavesEffect>Get it
                      <i class="fa fa-book ml-1"></i>
                    </a>
                    <a type="button" mdbBtn color="success" outline="true" class="waves-light" mdbWavesEffect
                      data-dismiss="modal" (click)="frame.hide()">Ok, thanks</a>
                  </div>
                </div>
              </div>
              <!--/.Content-->
            </div>
          </div>
        

Modal Discount


        <button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
          (click)="frame.show()" mdbWavesEffect>Launch Modal</button>

        <div mdbModal #frame="mdbModal" class="modal fade right modal-scrolling" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">

          <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Discount offer:
                  <strong>10% off</strong>
                </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="fa fa-gift fa-4x"></i>
                    </p>
                  </div>

                  <div class="col-9">
                    <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts.
                      Today is one of those
                      days.
                    </p>
                    <p>
                      <strong>Copy the following code and use it at the checkout. It's valid for
                        <u>one day</u>.</strong>
                    </p>
                    <h2>
                      <span class="badge">v52gs1</span>
                    </h2>

                  </div>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer flex-center">
                <a href="https://mdbootstrap.com/products/angular-ui-kit/" mdbBtn color="danger" class="waves-effect"
                  mdbWavesEffect>Get it now
                  <i class="fa fa-diamond ml-1"></i>
                </a>
                <a type="button" mdbBtn color="danger" outline="true" class="waves-effect" mdbWavesEffect data-dismiss="modal"
                  (click)="frame.hide()">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>

        </div>
      

Modal Related content


        <button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
          (click)="frame.show()" mdbWavesEffect>Launch Modal</button>

        <div mdbModal #frame="mdbModal" class="modal fade right modal-scrolling" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
          <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Related article</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-5">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid"
                      alt="">
                  </div>

                  <div class="col-7">
                    <p>
                      <strong>My travel to paradise</strong>
                    </p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
                    <button type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Read more</button>

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

Modal Abandoned cart


        <button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
          (click)="frame.show()" mdbWavesEffect>Launch Modal</button>

        <div mdbModal #frame="mdbModal" class="modal fade right modal-scrolling" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
          <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Product in the cart
                </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="fa fa-shopping-cart fa-4x"></i>
                    </p>
                  </div>

                  <div class="col-9">
                    <p>Do you need more time to make a purchase decision?</p>
                    <p>No pressure, your product will be waiting for you in the cart.</p>
                  </div>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" mdbBtn color="primary" class="waves-effect" mdbWavesEffect>Go to cart</a>
                <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect data-dismiss="modal"
                  (click)="frame.hide()">Cancel</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

Modal Confirm delete


        <button type="button" mdbBtn color="primary" class="waves-light" 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-sm modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content text-center">
              <!--Header-->
              <div class="modal-header d-flex justify-content-center">
                <p class="heading">Are you sure?</p>
              </div>

              <!--Body-->
              <div class="modal-body">
                <i class="fa fa-times fa-4x animated rotateIn"></i>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a href="https://mdbootstrap.com/products/angular-ui-kit/" mdbBtn color="danger" outline="true" class="waves-effect"
                  mdbWavesEffect>Yes</a>
                <a type="button" mdbBtn color="danger" class="waves-effect" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">No</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

Modal Poll MDB Pro component


          <button type="button" mdbBtn color="primary" class="waves-light" 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" [config]="{backdrop: false, ignoreBackdropClick: true}">
            <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
              <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                  <p class="heading lead">Feedback request
                  </p>

                  <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                  </button>
                </div>

                <!--Body-->
                <div class="modal-body">
                  <div class="text-center">
                    <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
                    <p>
                      <strong>Your opinion matters</strong>
                    </p>
                    <p>Have some ideas how to improve our product?
                      <strong>Give us your feedback.</strong>
                    </p>
                  </div>

                  <hr>

                  <!-- Radio -->
                  <p class="text-center">
                    <strong>Your rating</strong>
                  </p>
                  <div class="form-check mb-4">
                    <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1"
                      mdbInputDirective>
                    <label class="form-check-label" for="radio-179">Very good</label>
                  </div>

                  <div class="form-check mb-4">
                    <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2"
                      mdbInputDirective>
                    <label class="form-check-label" for="radio-279">Good</label>
                  </div>

                  <div class="form-check mb-4">
                    <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3"
                      mdbInputDirective>
                    <label class="form-check-label" for="radio-379">Mediocre</label>
                  </div>
                  <div class="form-check mb-4">
                    <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4"
                      mdbInputDirective>
                    <label class="form-check-label" for="radio-479">Bad</label>
                  </div>
                  <div class="form-check mb-4">
                    <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5"
                      mdbInputDirective>
                    <label class="form-check-label" for="radio-579">Very bad</label>
                  </div>
                  <!-- Radio -->

                  <p class="text-center">
                    <strong>What could we improve?</strong>
                  </p>
                  <!--Basic textarea-->
                  <div class="md-form">
                    <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"
                      mdbInputDirective></textarea>
                    <label for="form79textarea">Your message</label>
                  </div>

                </div>

                <!--Footer-->
                <div class="modal-footer justify-content-center">
                  <a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Send
                    <i class="fa fa-paper-plane ml-1"></i>
                  </a>
                  <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" data-dismiss="modal"
                    mdbWavesEffect (click)="frame.hide()">Cancel</a>
                </div>
              </div>
            </div>
          </div>
        

Modal Cart


          <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Your cart</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <!--Body-->
              <div class="modal-body">

                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Product name</th>
                      <th>Price</th>
                      <th>Remove</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Product 1</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fa fa-remove"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Product 2</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fa fa-remove"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>Product 3</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fa fa-remove"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">4</th>
                      <td>Product 4</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fa fa-remove"></i>
                        </a>
                      </td>
                    </tr>
                    <tr class="total">
                      <th scope="row">5</th>
                      <td>Total</td>
                      <td>400$</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>

              </div>
              <!--Footer-->
              <div class="modal-footer">
                <button type="button" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">Close</button>
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect>Checkout</button>
              </div>
            </div>
          </div>
        </div>
      

Modal Push


          <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content text-center">
              <!--Header-->
              <div class="modal-header d-flex justify-content-center">
                <p class="heading">Be always up to date</p>
              </div>

              <!--Body-->
              <div class="modal-body">
                <i class="fa fa-bell fa-4x animated rotateIn mb-4"></i>
                <p>Do you want to receive the push notification about the newest posts?</p>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a href="https://mdbootstrap.com/products/angular-ui-kit/" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Yes</a>
                <a type="button" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">No</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
      

Modal YouTube MDB Pro component


          <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
                  (click)="frame.hide()">Close</button>

              </div>

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

          </div>
        </div>
      

Modal Vimeo MDB Pro component


          <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
                  (click)="frame.hide()">Close</button>

              </div>

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

          </div>
        </div>
      

Modal Product MDB Pro component


        <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-5">
                    <!--Carousel Wrapper-->
                    <mdb-carousel [isControls]="true" [animation]="'slide'">
                      <!--First slide-->
                      <mdb-slide>
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg"
                          alt="First slide">
                      </mdb-slide>
                      <!--/First slide-->
                      <!--Second slide-->
                      <mdb-slide>
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg"
                          alt="Second slide">
                      </mdb-slide>
                      <!--/Second slide-->
                      <!--Third slide-->
                      <mdb-slide>
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg"
                          alt="Third slide">
                      </mdb-slide>
                      <!--/Third slide-->
                    </mdb-carousel>
                    <!--/.Carousel Wrapper-->
                  </div>
                  <div class="col-lg-7">
                    <h2 class="h2-responsive product-name">
                      <strong>Product Name</strong>
                    </h2>
                    <h4 class="h4-responsive">
                      <span class="green-text">
                        <strong>$49</strong>
                      </span>
                      <span class="grey-text">
                        <small>
                          <s>$89</s>
                        </small>
                      </span>
                    </h4>

                    <!--Accordion wrapper-->
                    <mdb-squeezebox [multiple]="false" aria-multiselectable="true">
                      <mdb-item [collapsed]="true" *ngFor="let item of itemsList">
                        <mdb-item-head> {{ item.title }} </mdb-item-head>
                        <mdb-item-body> {{ item.description }} </mdb-item-body>
                      </mdb-item>
                    </mdb-squeezebox>
                    <!--/.Accordion wrapper-->

                    <!-- Add to Cart -->
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="md-form">
                            <mdb-select [options]="colorSelect" placeholder="Choose your color"></mdb-select>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="md-form">
                            <mdb-select [options]="sizeSelect" placeholder="Choose your size"></mdb-select>
                          </div>
                        </div>
                      </div>
                      <div class="text-center">

                        <button type="button" mdbBtn color="secondary" class="waves-light" mdbWavesEffect (click)="frame.hide()"
                          data-dismiss="modal">Close</button>
                        <button mdbBtn color="primary" class="waves-light" mdbWavesEffect>Add to cart
                          <i class="fa fa-cart-plus ml-2" aria-hidden="true"></i>
                        </button>
                      </div>
                    </div>
                    <!-- /.Add to Cart -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      

        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'product-modal',
        templateUrl: './product-modal.component.html',
        styleUrls: ['./product-modal.component.scss'],
        })
        export class ProductModalComponent implements OnInit {
        colorSelect: Array<any>;
          sizeSelect: Array<any>;

            public itemsList: Object[] = [
            {
            title: 'Description',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid.'
            },
            {
            title: 'Details',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid.'
            },
            {
            title: 'Shipping',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid.'
            }
            ];

            ngOnInit() {
            this.colorSelect = [
            { value: 'Black', label: 'Black' },
            { value: 'White', label: 'White' },
            { value: 'Red', label: 'Red' },
            ];
            this.sizeSelect = [
            { value: 'XS', label: 'XS' },
            { value: 'S', label: 'S' },
            { value: 'L', label: 'L' },
            ];
            }
            }
      

Modal Social share MDB Pro component


          <button type="button" mdbBtn color="primary" class="waves-light" 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">
          <div class="modal-dialog cascading-modal" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Header-->
              <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title">
                  <i class="fa fa-users"></i> Spreed the word!</h4>
                <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 mb-0 text-center">


                <!--Facebook-->
                <a type="button" mdbBtn floating="true" class="btn-fb waves-light" mdbWavesEffect>
                  <i class="fa fa-facebook"></i>
                </a>
                <!--Twitter-->
                <a type="button" mdbBtn floating="true" class="btn-tw waves-light" mdbWavesEffect>
                  <i class="fa fa-twitter"></i>
                </a>
                <!--Google +-->
                <a type="button" mdbBtn floating="true" class="btn-gplus waves-light" mdbWavesEffect>
                  <i class="fa fa-google-plus"></i>
                </a>
                <!--Linkedin-->
                <a type="button" mdbBtn floating="true" class="btn-li waves-light" mdbWavesEffect>
                  <i class="fa fa-linkedin"></i>
                </a>
                <!--Instagram-->
                <a type="button" mdbBtn floating="true" class="btn-ins waves-light" mdbWavesEffect>
                  <i class="fa fa-instagram"></i>
                </a>
                <!--Pinterest-->
                <a type="button" mdbBtn floating="true" class="btn-pin waves-light" mdbWavesEffect>
                  <i class="fa fa-pinterest"></i>
                </a>
                <!--Youtube-->
                <a type="button" mdbBtn floating="true" class="btn-yt waves-light" mdbWavesEffect>
                  <i class="fa fa-youtube"></i>
                </a>
                <!--Dribbble-->
                <a type="button" mdbBtn floating="true" class="btn-dribbble waves-light" mdbWavesEffect>
                  <i class="fa fa-dribbble"></i>
                </a>
                <!--Vkontakte-->
                <a type="button" mdbBtn floating="true" class="btn-vk waves-light" mdbWavesEffect>
                  <i class="fa fa-vk"></i>
                </a>
                <!--Stack Overflow-->
                <a type="button" mdbBtn floating="true" class="btn-so waves-light" mdbWavesEffect>
                  <i class="fa fa-stack-overflow"></i>
                </a>
                <!--Slack-->
                <a type="button" mdbBtn floating="true" class="btn-slack waves-light" mdbWavesEffect>
                  <i class="fa fa-slack"></i>
                </a>
                <!--Github-->
                <a type="button" mdbBtn floating="true" class="btn-git waves-light" mdbWavesEffect>
                  <i class="fa fa-github"></i>
                </a>
                <!--Comments-->
                <a type="button" mdbBtn floating="true" class="btn-comm waves-light" mdbWavesEffect>
                  <i class="fa fa-comments"></i>
                </a>
                <!--Email-->
                <a type="button" mdbBtn floating="true" class="btn-email waves-light" mdbWavesEffect>
                  <i class="fa fa-envelope"></i>
                </a>

              </div>

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

          </div>
        </div>
      

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'

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.