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

#	Product name	Price
1	Product 1	100$
2	Product 2	100$
3	Product 3	100$
4	Product 4	100$
5	Total	400$

Modal Cookies

HTML


          <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="fas 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

HTML


          <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="fas 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

HTML


        <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="fas 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="far fa-gem 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

HTML


        <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

HTML


        <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="fas 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

HTML


        <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="fas 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

HTML


          <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="far fa-file-alt 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"
                      mdbInput>
                    <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"
                      mdbInput>
                    <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"
                      mdbInput>
                    <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"
                      mdbInput>
                    <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"
                      mdbInput>
                    <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"
                      mdbInput></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="fas 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

#	Product name	Price
1	Product 1	100$
2	Product 2	100$
3	Product 3	100$
4	Product 4	100$
5	Total	400$

HTML


          <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="fas fa-times"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Product 2</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fas fa-times"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>Product 3</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fas fa-times"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">4</th>
                      <td>Product 4</td>
                      <td>100$</td>
                      <td>
                        <a>
                          <i class="fas fa-times"></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

HTML


          <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="fas 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

HTML


          <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="fab fa-facebook-f"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fab fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fab fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fab fa-linkedin-in"></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

HTML


          <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="fab fa-facebook-f"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fab fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fab fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fab fa-linkedin-in"></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

Product Name

$49 $89

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Collapsible Group Item #2

Collapsible Group Item #3

Select color

Select size

HTML
TS


        <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="fas 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

HTML


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

Import example Modules list

Directive

mdbModal

Selector: mdbModal

Type: ModalDirective

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.

Angular Bootstrap Modal examples & templates

Angular Modal Examples & Templates - Bootstrap 4 & Material Design

Modal Cookies

Modal Coupon

v52gs1

Modal Discount

v52gs1

Modal Related content

Modal Abandoned cart

Modal Confirm delete

Modal Poll MDB Pro component

Modal Cart

Your cart

Modal Push

Modal YouTube MDB Pro component

Modal Vimeo MDB Pro component

Modal Product MDB Pro component

Product Name

$49 $89

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Modal Social share MDB Pro component

Spreed the word!

Angular Modals - API

Modules used

Directive

mdbModal

Inputs

Inputs

ModalOptions

Outputs

Methods