Topic: How to close dynamic modal?

zoloterra free asked 5 years ago


I am making a dynamic modal using the example from

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.

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 =, 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) {

    close = function () {
        this.result$.next({code: 'closed'});

Please insert min. 20 characters.


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



Specification of the issue

  • 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