Angular Bootstrap Modal Form
Angular Modal Form - 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 forms are displayed-on-action pop-up forms that are used for gathering data from website visitors and to register or log users.
Using them alongside valuable content may bring a lot of business value to your project.
However, you should remember that using them in a spammy manner might have a completely different outcome - leading to a drop of UX and frustration of your users.
Examples of Bootstrap modal form use include:
- Email signup
- Register modal
- Contact form
See also: Modal Core Documentation, Modal Styles and Modal Templates.
Simple modal login
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input type="email" id="defaultForm-email" [formControl]="loginFormModalEmail" class="form-control"
mdbInput mdbValidate>
<label for="defaultForm-email">Your email</label>
<mdb-error
*ngIf="loginFormModalEmail.invalid && (loginFormModalEmail.dirty || loginFormModalEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="loginFormModalEmail.valid && (loginFormModalEmail.dirty || loginFormModalEmail.touched)">
Input
valid
</mdb-success>
</div>
<div class="md-form mb-4">
<mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
<input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword"
class="form-control" mdbInput mdbValidate>
<label for="defaultForm-pass">Your password</label>
<mdb-error
*ngIf="loginFormModalPassword.invalid && (loginFormModalPassword.dirty || loginFormModalPassword.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="loginFormModalPassword.valid && (loginFormModalPassword.dirty || loginFormModalPassword.touched)">
Input valid
</mdb-success>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
loginFormModalEmail: new FormControl('', Validators.email),
loginFormModalPassword: new FormControl('', Validators.required)
});
}
get loginFormModalEmail() {
return this.validatingForm.get('loginFormModalEmail');
}
get loginFormModalPassword() {
return this.validatingForm.get('loginFormModalPassword');
}
}
Simple modal register
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
<input type="text" id="orangeForm-name" class="form-control" [formControl]="signupFormModalName"
mdbInput mdbValidate>
<label for="orangeForm-name">Your name</label>
<mdb-error
*ngIf="signupFormModalName.invalid && (signupFormModalName.dirty || signupFormModalName.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="signupFormModalName.valid && (signupFormModalName.dirty || signupFormModalName.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form mb-5">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input type="email" id="orangeForm-email" class="form-control" [formControl]="signupFormModalEmail"
mdbInput mdbValidate>
<label for="orangeForm-email">Your email</label>
<mdb-error
*ngIf="signupFormModalEmail.invalid && (signupFormModalEmail.dirty || signupFormModalEmail.touched)">
Input
invalid
</mdb-error>
<mdb-success
*ngIf="signupFormModalEmail.valid && (signupFormModalEmail.dirty || signupFormModalEmail.touched)">
Input
valid
</mdb-success>
</div>
<div class="md-form mb-4">
<mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
<input type="password" id="orangeForm-pass" class="form-control"
[formControl]="signupFormModalPassword" mdbInput mdbValidate>
<label for="orangeForm-pass">Your password</label>
<mdb-error
*ngIf="signupFormModalPassword.invalid && (signupFormModalPassword.dirty || signupFormModalPassword.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="signupFormModalPassword.valid && (signupFormModalPassword.dirty || signupFormModalPassword.touched)">
Input valid
</mdb-success>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect>Sign up</button>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
signupFormModalName: new FormControl('', Validators.required),
signupFormModalEmail: new FormControl('', Validators.email),
signupFormModalPassword: new FormControl('', Validators.required),
});
}
get signupFormModalName() {
return this.validatingForm.get('signupFormModalName');
}
get signupFormModalEmail() {
return this.validatingForm.get('signupFormModalEmail');
}
get signupFormModalPassword() {
return this.validatingForm.get('signupFormModalPassword');
}
}
Simple modal subscription
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
<input type="text" id="form3" class="form-control" [formControl]="subscriptionFormModalName" mdbInput
mdbValidate>
<label for="form3">Your name</label>
<mdb-error
*ngIf="subscriptionFormModalName.invalid && (subscriptionFormModalName.dirty || subscriptionFormModalName.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="subscriptionFormModalName.valid && (subscriptionFormModalName.dirty || subscriptionFormModalName.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form mb-4">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input type="email" id="form2" class="form-control" [formControl]="subscriptionFormModalEmail"
mdbInput mdbValidate>
<label for="form2">Your email</label>
<mdb-error
*ngIf="subscriptionFormModalEmail.invalid && (subscriptionFormModalEmail.dirty || subscriptionFormModalEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="subscriptionFormModalEmail.valid && (subscriptionFormModalEmail.dirty || subscriptionFormModalEmail.touched)">
Input valid
</mdb-success>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button mdbBtn color="indigo" class="waves-light" mdbWavesEffect>Send
<mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
</button>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
subscriptionFormModalName: new FormControl('', Validators.required),
subscriptionFormModalEmail: new FormControl('', Validators.email)
});
}
get subscriptionFormModalName() {
return this.validatingForm.get('subscriptionFormModalName');
}
get subscriptionFormModalEmail() {
return this.validatingForm.get('subscriptionFormModalEmail');
}
}
Simple modal contact
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
<input type="text" id="form34" class="form-control" mdbInput mdbValidate
[formControl]="contactFormModalName">
<label for="form34">Your name</label>
<mdb-error
*ngIf="contactFormModalName.invalid && (contactFormModalName.dirty || contactFormModalName.touched)">
Input
invalid
</mdb-error>
<mdb-success
*ngIf="contactFormModalName.valid && (contactFormModalName.dirty || contactFormModalName.touched)">
Input
valid
</mdb-success>
</div>
<div class="md-form mb-5">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input type="email" id="form29" class="form-control" mdbInput mdbValidate
[formControl]="contactFormModalEmail">
<label for="form29">Your email</label>
<mdb-error
*ngIf="contactFormModalEmail.invalid && (contactFormModalEmail.dirty || contactFormModalEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="contactFormModalEmail.valid && (contactFormModalEmail.dirty || contactFormModalEmail.touched)">
Input
valid
</mdb-success>
</div>
<div class="md-form mb-5">
<mdb-icon fas icon="tag" class="prefix grey-text"></mdb-icon>
<input type="text" id="form32" class="form-control" mdbInput mdbValidate
[formControl]="contactFormModalSubject">
<label for="form32">Subject</label>
<mdb-error
*ngIf="contactFormModalSubject.invalid && (contactFormModalSubject.dirty || contactFormModalSubject.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="contactFormModalSubject.valid && (contactFormModalSubject.dirty || contactFormModalSubject.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form">
<mdb-icon fas icon="pencil-alt" class="prefix grey-text"></mdb-icon>
<textarea type="text" id="form8" class="md-textarea form-control" rows="1" mdbInput mdbValidate
[formControl]="contactFormModalMessage"></textarea>
<label for="form8">Your message</label>
<mdb-error
*ngIf="contactFormModalMessage.invalid && (contactFormModalMessage.dirty || contactFormModalMessage.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="contactFormModalMessage.valid && (contactFormModalMessage.dirty || contactFormModalMessage.touched)">
Input valid
</mdb-success>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button mdbBtn color="unique" class="waves-light" mdbWavesEffect>Send
<mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
</button>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
contactFormModalName: new FormControl('', Validators.required),
contactFormModalEmail: new FormControl('', Validators.email),
contactFormModalSubject: new FormControl('', Validators.required),
contactFormModalMessage: new FormControl('', Validators.required)
});
}
get contactFormModalName() {
return this.validatingForm.get('contactFormModalName');
}
get contactFormModalEmail() {
return this.validatingForm.get('contactFormModalEmail');
}
get contactFormModalSubject() {
return this.validatingForm.get('contactFormModalSubject');
}
get contactFormModalMessage() {
return this.validatingForm.get('contactFormModalMessage');
}
}
Cascading modal register/login MDB Pro component
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>
Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Tab panels -->
<mdb-tabset #staticTabs [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'" [contentClass]="''"
class="tab-content">
<!--Panel 7-->
<mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel"
heading="<i class='fas fa-user'></i> Login">
<!--Body-->
<div class="modal-body mb-1">
<form [formGroup]="validatingForm">
<div class="md-form form-sm">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="form22" class="form-control"
formControlName="modalFormLoginEmail" />
<label for="form22">Your email</label>
<mdb-error *ngIf="
modalFormLoginEmail.invalid &&
(modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
">
Input invalid
</mdb-error>
<mdb-success *ngIf="
modalFormLoginEmail.valid &&
(modalFormLoginEmail.dirty || modalFormLoginEmail.touched)
">Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="password" id="form23" class="form-control"
formControlName="modalFormLoginPassword" />
<label for="form23">Your password</label>
<mdb-error *ngIf="
modalFormLoginPassword.invalid &&
(modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
">
Input invalid
</mdb-error>
<mdb-success *ngIf="
modalFormLoginPassword.valid &&
(modalFormLoginPassword.dirty || modalFormLoginPassword.touched)
">
Input valid
</mdb-success>
</div>
</form>
<div class="text-center mt-2">
<button mdbBtn color="info" class="waves-light" mdbWavesEffect>
Log in
<mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer display-footer">
<div class="options text-center text-md-right mt-1">
<p>
Not a member?
<a href="#" class="blue-text">Sign Up</a>
</p>
<p>
Forgot
<a href="#" class="blue-text">Password?</a>
</p>
</div>
<button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
(click)="frame.hide()" mdbWavesEffect>
Close
</button>
</div>
</mdb-tab>
<!--/.Panel 7-->
<!--Panel 8-->
<mdb-tab class="tab-pane fade" id="panel8" role="tabpanel"
heading="<i class='fas fa-user-plus'></i> Register">
<!--Body-->
<div class="modal-body">
<form [formGroup]="validatingForm">
<div class="md-form form-sm">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="form24" class="form-control"
formControlName="modalFormRegisterEmail" />
<label for="form24">Your email</label>
<mdb-error *ngIf="
modalFormRegisterEmail.invalid &&
(modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
">
Input invalid
</mdb-error>
<mdb-success *ngIf="
modalFormRegisterEmail.valid &&
(modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)
">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="password" id="form25" class="form-control"
formControlName="modalFormRegisterPassword" />
<label for="form25">Your password</label>
<mdb-error *ngIf="
modalFormRegisterPassword.invalid &&
(modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
">
Input invalid
</mdb-error>
<mdb-success *ngIf="
modalFormRegisterPassword.valid &&
(modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)
">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="password" id="form26" class="form-control"
formControlName="modalFormRegisterRepeatPassword" />
<label for="form26">Repeat password</label>
<mdb-error *ngIf="
modalFormRegisterRepeatPassword.invalid &&
(modalFormRegisterRepeatPassword.dirty ||
modalFormRegisterRepeatPassword.touched)
">
Input invalid
</mdb-error>
<mdb-success *ngIf="
modalFormRegisterRepeatPassword.valid &&
(modalFormRegisterRepeatPassword.dirty ||
modalFormRegisterRepeatPassword.touched)
">
Input valid
</mdb-success>
</div>
<div class="text-center form-sm mt-2">
<button mdbBtn color="info" class="waves-light" mdbWavesEffect>
Sign up
<mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
</button>
</div>
</form>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-right">
<p class="pt-1">
Already have an account?
<a href="#" class="blue-text">Log In</a>
</p>
</div>
<button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
(click)="frame.hide()" mdbWavesEffect>
Close
</button>
</div>
</mdb-tab>
<!--/.Panel 8-->
</mdb-tabset>
</div>
</div>
<!--/.Content-->
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
modalFormLoginEmail: new FormControl('', Validators.email),
modalFormLoginPassword: new FormControl('', Validators.required),
modalFormRegisterEmail: new FormControl('', Validators.email),
modalFormRegisterPassword: new FormControl('', Validators.required),
modalFormRegisterRepeatPassword: new FormControl('', Validators.required)
});
}
get modalFormLoginEmail() {
return this.validatingForm.get('modalFormLoginEmail');
}
get modalFormLoginPassword() {
return this.validatingForm.get('modalFormLoginPassword');
}
get modalFormRegisterEmail() {
return this.validatingForm.get('modalFormRegisterEmail');
}
get modalFormRegisterPassword() {
return this.validatingForm.get('modalFormRegisterPassword');
}
get modalFormRegisterRepeatPassword() {
return this.validatingForm.get('modalFormRegisterRepeatPassword');
}
}
Modal with avatar
Maria Doe
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar"
class="rounded-circle img-responsive">
</div>
<!--Body-->
<div class="modal-body mb-1">
<h5 class="mt-1 mb-2 text-center">Maria Doe</h5>
<div class="md-form ml-0 mr-0">
<input type="password" type="text" id="form29" class="form-control form-control-sm ml-0" mdbInput
mdbValidate [formControl]="modalFormAvatarPassword">
<label for="form29" class="ml-0">Enter password</label>
<mdb-error
*ngIf="modalFormAvatarPassword.invalid && (modalFormAvatarPassword.dirty || modalFormAvatarPassword.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormAvatarPassword.valid && (modalFormAvatarPassword.dirty || modalFormAvatarPassword.touched)">
Input valid
</mdb-success>
</div>
<div class="text-center mt-4">
<button mdbBtn color="cyan" rounded="true" class="mt-1 waves-light" mdbWavesEffect>Login
<mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
modalFormAvatarPassword: new FormControl('', Validators.required)
});
}
get modalFormAvatarPassword() {
return this.validatingForm.get('modalFormAvatarPassword');
}
}
Subscription modal with an orange header
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form mb-5">
<mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
<input type="text" id="form3" class="form-control" mdbInput mdbValidate
[formControl]="modalFormSubscriptionName">
<label for="form3">Your name</label>
<mdb-error
*ngIf="modalFormSubscriptionName.invalid && (modalFormSubscriptionName.dirty || modalFormSubscriptionName.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormSubscriptionName.valid && (modalFormSubscriptionName.dirty || modalFormSubscriptionName.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input type="email" id="form2" class="form-control" mdbInput mdbValidate
[formControl]="modalFormSubscriptionEmail">
<label for="form2">Your email</label>
<mdb-error
*ngIf="modalFormSubscriptionEmail.invalid && (modalFormSubscriptionEmail.dirty || modalFormSubscriptionEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormSubscriptionEmail.valid && (modalFormSubscriptionEmail.dirty || modalFormSubscriptionEmail.touched)">
Input valid
</mdb-success>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" mdbBtn color="warning" outline="true" class="waves-effect" mdbWavesEffect>Send
<mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
modalFormSubscriptionName: new FormControl('', Validators.required),
modalFormSubscriptionEmail: new FormControl('', Validators.email)
});
}
get modalFormSubscriptionName() {
return this.validatingForm.get('modalFormSubscriptionName');
}
get modalFormSubscriptionEmail() {
return this.validatingForm.get('modalFormSubscriptionEmail');
}
}
.modal-notify .modal-header {
border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
border-radius: 3px;
}
Elegant modal login MDB Pro component
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel">
<strong>Sign in</strong>
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mx-4">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email1" class="form-control" mdbInput mdbValidate
[formControl]="modalFormElegantEmail">
<label for="Form-email1">Your email</label>
<mdb-error
*ngIf="modalFormElegantEmail.invalid && (modalFormElegantEmail.dirty || modalFormElegantEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormElegantEmail.valid && (modalFormElegantEmail.dirty || modalFormElegantEmail.touched)">
Input
valid
</mdb-success>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass1" class="form-control" mdbInput mdbValidate
[formControl]="modalFormElegantPassword">
<label for="Form-pass1">Your password</label>
<mdb-error
*ngIf="modalFormElegantPassword.invalid && (modalFormElegantPassword.dirty || modalFormElegantPassword.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormElegantPassword.valid && (modalFormElegantPassword.dirty || modalFormElegantPassword.touched)">
Input valid
</mdb-success>
<p class="font-small blue-text d-flex justify-content-end">Forgot
<a href="#" class="blue-text ml-1"> Password?</a>
</p>
</div>
<div class="text-center mb-3">
<button type="button" mdbBtn gradient="blue" block="true" rounded="true"
class="z-depth-1a waves-light" mdbWavesEffect>Sign in
</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
with:</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light"
mdbWavesEffect>
<mdb-icon fab icon="facebook-f" class="text-center"></mdb-icon>
</button>
<!--Twitter-->
<button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light"
mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</button>
<!--Google +-->
<button type="button" mdbBtn color="white" rounded="true" class="z-depth-1a waves-light"
mdbWavesEffect>
<mdb-icon fab icon="google-plus"></mdb-icon>
</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">Not a member?
<a href="#" class="blue-text ml-1"> Sign Up</a>
</p>
</div>
</div>
<!--/.Content-->
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
constructor() {
this.validatingForm = new FormGroup({
modalFormElegantEmail: new FormControl('', Validators.email),
modalFormElegantPassword: new FormControl('', Validators.required)
});
}
get modalFormElegantEmail() {
return this.validatingForm.get('modalFormElegantEmail');
}
get modalFormElegantPassword() {
return this.validatingForm.get('modalFormElegantPassword');
}
}
.form-elegant .font-small {
font-size: 0.8rem;
}
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
}
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
}
.form-elegant .modal-header {
border-bottom: none;
}
.modal-dialog .form-elegant .btn .fa {
color: #2196f3!important;
}
.form-elegant .modal-body, .form-elegant .modal-footer {
font-weight: 400;
}
Dark modal register MDB Pro component
<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
(click)="frame.show()" mdbWavesEffect>Launch Modal
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog form-dark" role="document">
<!--Content-->
<mdb-card
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp')"
class="modal-content">
<div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<!--Header-->
<div class="modal-header text-center pb-4">
<h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel">
<strong>SIGN</strong>
<a class="green-text font-weight-bold">
<strong> UP</strong>
</a>
</h3>
<button type="button" class="close white-text" data-dismiss="modal" aria-label="Close"
(click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email5" class="form-control white-text" mdbValidate mdbInput
[formControl]="modalFormDarkEmail">
<label for="Form-email5">Your email</label>
<mdb-error
*ngIf="modalFormDarkEmail.invalid && (modalFormDarkEmail.dirty || modalFormDarkEmail.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormDarkEmail.valid && (modalFormDarkEmail.dirty || modalFormDarkEmail.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass5" class="form-control white-text" mdbValidate mdbInput
[formControl]="modalFormDarkPassword">
<label for="Form-pass5">Your password</label>
<mdb-error
*ngIf="modalFormDarkPassword.invalid && (modalFormDarkPassword.dirty || modalFormDarkPassword.touched)">
Input invalid
</mdb-error>
<mdb-success
*ngIf="modalFormDarkPassword.valid && (modalFormDarkPassword.dirty || modalFormDarkPassword.touched)">
Input valid
</mdb-success>
<div class="form-group mt-4">
<mdb-checkbox>Accept the
<a href="#" class="green-text font-weight-bold"> Terms and Conditions</a>
</mdb-checkbox>
<input class="form-check-input" type="checkbox" id="checkbox624">
</div>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="text-center mb-3 col-md-12">
<button type="button" mdbBtn color="success" block="true" rounded="true"
class="z-depth-1 waves-light" mdbWavesEffect>Sign up
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<p class="font-small white-text d-flex justify-content-end">Have an account?
<a href="#" class="green-text ml-1 font-weight-bold"> Log in</a>
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</mdb-card>
<!--/.Content-->
</div>
</div>
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
validatingForm: FormGroup;
ngOnInit() {
this.validatingForm = new FormGroup({
modalFormDarkEmail: new FormControl('', Validators.email),
modalFormDarkPassword: new FormControl('', Validators.required)
});
}
get modalFormDarkEmail() {
return this.validatingForm.get('modalFormDarkEmail');
}
get modalFormDarkPassword() {
return this.validatingForm.get('modalFormDarkPassword');
}
}
.form-dark .font-small {
font-size: 0.8rem;
}
.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
font-size: 0.8rem;
}
.form-dark [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px;
}
.form-dark .md-form label {
color: #fff;
}
.form-dark input[type=email]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=email]:focus:not([readonly]) + label {
color: #fff;
}
.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=password]:focus:not([readonly]) + label {
color: #fff;
}
.form-dark input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-dark input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.form-dark .modal-header {
border-bottom: none;
}
Angular Modals - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of modals component.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { ModalModule, TooltipModule, PopoverModule, ButtonsModule } from 'ng-uikit-pro-standard';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// For Cascading Modal only
import { TabsModule } from 'ng-uikit-pro-standard';
import { ModalModule, TooltipModule, PopoverModule, ButtonsModule } from 'angular-bootstrap-md';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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. |