Topic: Modal Form
pzimmer priority asked 2 years ago
*Expected behavior*How do you create Modal Form in MDB5 without creating a separate component?In my code below the modal should open.
*Actual behavior*No modal shows up.
Resources (screenshots, code snippets etc.)
<div class="modal fade left"
id="exampleSideModal4"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-side modal-bottom-left">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Subscribe</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
</div>
</div>
</div>
</div>
<button type="button"
class="btn btn-primary"
data-mdb-toggle="modal"
data-mdb-target="#exampleSideModal4">
Launch demo modal
</button>
Arkadiusz Idzikowski staff answered 2 years ago
@pzimmer The code you provided is for different MDB product - MDB Standard, for MDB5 Angular please use the code from this documentation: https://mdbootstrap.com/docs/b5/angular/components/modal/
If you don't want to create a new component you can use ModalService
to open content of ng-template
. Here is a simple example:
HTML:
<ng-template #template>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal from template</h5>
<button type="button" class="btn-close" aria-label="Close" (click)="templateModalRef.close()"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="templateModalRef.close()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</ng-template>
<button type="button" class="btn btn-primary" (click)="openModalFromTemplate()">
Launch demo modal
</button>
TS:
@ViewChild('template') modalTemplate: TemplateRef<any>;
templateModalRef: MdbModalRef<TemplateRef<any>> | null = null;
openModalFromTemplate() {
this.templateModalRef = this._modalService.open(this.modalTemplate);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.0.0
- Device: Desktop
- Browser: Chrome
- OS: WIndows
- Provided sample code: No
- Provided link: No