Topic: How to close dynamic modal?
                  
                  zoloterra
                  free
                  asked 6 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 5 years ago
                    
any idea here, is there something like InjectionToken?
Arkadiusz Idzikowski staff commented 5 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 6 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