Topic: How to close dynamic modal?

zoloterra free asked 3 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 2 years ago


any idea here, is there something like InjectionToken?


Arkadiusz Idzikowski staff commented 2 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 3 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();
    };
}


Please insert min. 20 characters.

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: 7.5.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: Yes
  • Provided link: Yes