Angular Bootstrap Modal Examples & Templates
Angular Modal Examples & Templates - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Angular Bootstrap modal examples & templates are a set of advanced modal examples which you can use in your project.
See also: Modal Core Documentation, Modal Forms and Modal Styles.
Click on the buttons below to launch a modals demo
.webp)
.webp)
.webp)
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
<mdb-icon fas icon="book" class="ml-1"></mdb-icon>
</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
<mdb-icon fas icon="book" class="ml-1"></mdb-icon>
</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">×</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>
<mdb-badge danger="true">v52gs1</mdb-badge>
</h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/docs/angular/pro/" mdbBtn color="danger" class="waves-effect"
mdbWavesEffect>Get it now
<mdb-icon far icon="gem" class="ml-1"></mdb-icon>
</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
Related article
.webp)
My travel to paradise
Lorem ipsum dolor sit amet consectetur adipisicing elit [...]
<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">×</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).webp" 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="info" 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">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center">
<mdb-icon fas icon="shopping-cart" size="4x"></mdb-icon>
</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="info" class="waves-effect" mdbWavesEffect>Go to cart</a>
<a type="button" mdbBtn color="info" 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">
<mdb-icon fas icon="times" size="4x" class="animated rotateIn"></mdb-icon>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a href="https://mdbootstrap.com/docs/angular/pro/" 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">
<mdb-icon far icon="file-alt" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
<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
<mdb-icon fas icon="paper-plane" class="ml-1"></mdb-icon>
</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>
<mdb-icon fas icon="times"></mdb-icon>
</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Product 2</td>
<td>100$</td>
<td>
<a>
<mdb-icon fas icon="times"></mdb-icon>
</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Product 3</td>
<td>100$</td>
<td>
<a>
<mdb-icon fas icon="times"></mdb-icon>
</a>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Product 4</td>
<td>100$</td>
<td>
<a>
<mdb-icon fas icon="times"></mdb-icon>
</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">
<mdb-icon fas icon="bell" size="4x" class="animated rotateIn mb-4"></mdb-icon>
<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/docs/angular/pro/" 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" mdbBtn color="fb" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" mdbBtn color="tw" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" mdbBtn color="gplus" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" mdbBtn color="ins" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="linkedin-in"></mdb-icon>
</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" color="fb" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="linkedin-in"></mdb-icon>
</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.
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.
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.
<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).webp"
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).webp"
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).webp"
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
<mdb-icon fas icon="cart-plus" class="ml-2" aria-hidden="true"></mdb-icon>
</button>
</div>
</div>
<!-- /.Add to Cart -->
</div>
</div>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'product-modal',
templateUrl: './product-modal.component.html',
styleUrls: ['./product-modal.component.scss'],
})
export class ProductModalComponent {
colorSelect = [
{ value: 'Black', label: 'Black' },
{ value: 'White', label: 'White' },
{ value: 'Red', label: 'Red' },
];
sizeSelect = [
{ value: 'XS', label: 'XS' },
{ value: 'S', label: 'S' },
{ value: 'L', label: 'L' },
];
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.'
}
];
}
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">
<mdb-icon fas icon="users"></mdb-icon> Spreed the word!</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 mb-0 text-center">
<!--Facebook-->
<a type="button" mdbBtn floating="true" color="fb" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" color="tw" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" color="gplus" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" color="li" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="linkedin-in"></mdb-icon>
</a>
<!--Instagram-->
<a type="button" mdbBtn floating="true" color="ins" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="instagram"></mdb-icon>
</a>
<!--Pinterest-->
<a type="button" mdbBtn floating="true" color="pin" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="pinterest"></mdb-icon>
</a>
<!--Youtube-->
<a type="button" mdbBtn floating="true" color="yt" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="youtube"></mdb-icon>
</a>
<!--Dribbble-->
<a type="button" mdbBtn floating="true" color="dribbble" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="dribbble"></mdb-icon>
</a>
<!--Vkontakte-->
<a type="button" mdbBtn floating="true" color="vk" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="vk"></mdb-icon>
</a>
<!--Stack Overflow-->
<a type="button" mdbBtn floating="true" color="so" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="stack-overflow"></mdb-icon>
</a>
<!--Slack-->
<a type="button" mdbBtn floating="true" color="slack" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="slack"></mdb-icon>
</a>
<!--Github-->
<a type="button" mdbBtn floating="true" color="git" class="waves-light" mdbWavesEffect>
<mdb-icon fab icon="github"></mdb-icon>
</a>
<!--Comments-->
<a type="button" mdbBtn floating="true" color="comm" class="waves-light" mdbWavesEffect>
<mdb-icon fas icon="comments"></mdb-icon>
</a>
<!--Email-->
<a type="button" mdbBtn floating="true" color="email" class="waves-light" mdbWavesEffect>
<mdb-icon fas icon="envelope"></mdb-icon>
</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.
import { ModalModule, TooltipModule, PopoverModule, ButtonsModule } from 'ng-uikit-pro-standard';
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. |