Open Modal Programmatically

Topic: Open Modal Programmatically

Sam Mallabone asked 7 years ago

Hi, I am currently running into a problem when trying to open a mdb-modal programmatically.I have a function that is checking to see if all the entered input by a user is correct, and if it is a success modal will be shown. Otherwise, an error modal will be shown that will notify the user that they have entered invalid information. Is there any way to do this programmatically? I have already tried making hidden buttons that call the show() method but this did not work.Thanks

Add comment

Damian Gemza staff answered 7 years ago

3 0 Best answer

Dear Sam, You have to import ModalDirective, and in ViewChild you have to pick your modal ID and bind it to ModalDirective type. Here's the code: .html:

<button type="button" class="btn btn-primary relative waves-light" (click)="showModal()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<butto ntype="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">

<spanaria-hidden="true">×</span>

</button>

<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

...

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbRippleRadius>Close</button>

<button type="button" class="btn btn-primary relative waves-light"mdbRippleRadius>Save changes</button>

</div>

</div>

</div>

</div>

.ts:

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

import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

@ViewChild('basicModal') public showModalOnClick: ModalDirective;

public showModal():void {

this.showModalOnClick.show();

}

ngOnInit() {

}

}

Try it and let me know, if it is what you want to use. Best Regards, Damian

xfadop pro commented 7 years ago

I had similar requirement and It helped me Damian. Thank You!

Add comment

xzesstence pro answered 6 years ago

2 0 Best answer

Oh wow that was a long story.. I was trying to create a simple Modal Module i can simply reuse.. I always got 'show' of undefined or something.. This is my working code, the important step here is to use the @ViewChild and to declare inside your modal component @Component with exportAs: 'child Edit: Wow, why is this Code function breaking the code?? every free site works better! MDB should learn from free angular goodies like Primeng.. both thumbs down! This is not a good customer experience here!

import { ModalDirective } from 'ng-uikit-pro-standard';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
@Component({
selector: 'app-modal-dialog',
templateUrl: './modal-dialog.component.html',
styleUrls: ['./modal-dialog.component.scss'],
exportAs: 'child'
})
export class ModalDialogComponent implements OnInit {
@Input() DialogTitle: string;
@Input() DialogBody: string;
@Input() DialogOkButtonText: string;
@ViewChild('processingModal') processingModal: ModalDirective;
constructor() {
}
ngOnInit() {
}
openDialog() {
this.processingModal.show();
}
closeDialog() {
this.processingModal.hide();
}
}

<div mdbModal #processingModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="processingModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">{{DialogTitle}}</h4>
</div>
<div class="modal-body">
{{DialogBody}}
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect (click)="processingModal.hide()">{{DialogOkButtonText}}</button>
</div>
</div>
</div>
</div>

<app-modal-dialog #modal="child" [DialogTitle]="'Dies ist der Titel'" [DialogOkButtonText]="'Dialog schliessen'" [DialogBody]="'Hier steht nichts'"></app-modal-dialog>
<a (click)="modal.openDialog()" class="btn btn-primary waves-light" mdbWavesEffect i18n><fa-icon [icon]="faSearch"></fa-icon>Produkt auswählen</a>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear xzesstence, Sorry to hear that you encountered problems using MDB. We are constantly working on improving our components to suit the needs of our clients. We are already aware of the problems with creating dynamic and reusable modal, but unfortunately they have not been fixed yet. To use such functionality you would need to create your own service. I described how to do that here: Calling modal from another component Regards, Arek

ffdev commented 6 years ago

Do you have an eta for when dynamic and reusable modals are available? This is a quite critical feature for bootstrap applications. We use active modals heavily in several projects..

Arkadiusz Idzikowski staff commented 6 years ago

It should be available in next version (December 10).

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Sam Mallabone

2Support score
1Questions 0Answers

0Snippets likes 0Snippets