Topic: How to close dynamic modal?
zoloterra free asked 5 years ago
Hello,
I am making a dynamic modal using the example from https://mdbootstrap.com/docs/angular/modals/basic/#dynamic
My code breaks here:
constructor(public modalRef: MDBModalRef) {}
With the bug: NullInjectorError: No provider for MDBModalRef!
Where to put/inject the MDBModalRef
as provider to make the above code working?
Adding MDBModalRef
to app.module
providers does not help.
fincha pro answered 4 years ago
any idea here, is there something like InjectionToken?
Arkadiusz Idzikowski staff commented 4 years ago
Please take a look at our dynamic modal guide. You can close modal with the close button or close it programmatically from another component by using this.modalRef.hide()
method.
https://mdbootstrap.com/docs/angular/modals/basic/#dynamic
zoloterra free answered 5 years ago
I do not know the right answer for the correct MDBModalRef
usage in the modal component, however I managed to hide the modal without the MDBModalRef
reference at all (in the modal component).
Here is the calling component openDialog
method:
private modalOptions = {
backdrop: true,
keyboard: true,
focus: true,
show: false,
ignoreBackdropClick: true,
class: 'dialog-modal',
containerClass: 'dialog-modal-container',
animated: true,
data: { }
}
openDialog(dialogConfig: DialogConfig) {
const modalOptions = Object.assign({}, this.modalOptions, {data: {
dialogConfig: dialogConfig,
result$: new Subject<DialogAnswer>(),
hide: () => modalRef.hide()
}});
const modalRef = this.modalService.show(DialogModalComponent, modalOptions);
return modalRef.content.result$.pipe(take(1))
.subscribe((answer: DialogAnswer) => {
// take an action here
});
}
And here is the modal component itself:
export class DialogModalComponent {
dialogConfig: DialogConfig;
hide: () => void;
result$: Subject<DialogAnswer>;
selectAnswer = function (answer: DialogAnswer) {
this.result$.next(answer);
this.hide();
};
close = function () {
this.result$.next({code: 'closed'});
this.hide();
};
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: Yes
- Provided link: Yes