Why am i getting NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]:?

Solution 1:

I have to make some assumptions about your code, as you have not posted the component.ts code, but it seems that you have declared an MdbModalRef as a constructor parameter.

MdbModalRefs are not meant to be injected directly. Instead, you should obtain one using an MdbModalService, like so

Parent TS:

export class CreateComponent {
    modalRef: MdbModalRef<any>;
    constructor(private modalService: MdbModalService) {}
    // ...
    showModal(modal: TemplateRef<any>) {
        this.modalRef = modalService.open(modal);
    }

    closeModal() {
        this.modalRef.close();
    }
}

Parent HTML:

<button (click)="showModal(childModal)">Show</button>
<ng-template #childModal>
    <child-component (close)="closeModal()"></child-component>
</ng-template>

Child TS:

export class ChildComponent {
    @Output() close: EventEmitter<any>;

    closeClicked() {
        this.close.emit();
    }
}

Child HTML:

<h1>Modal</h1>
<p>Modal content</p>
<button (click)="closeClicked()">Close</button>

Here, the child component is defining an event called close, and the parent component closes the modal when it receives the event.

Of course, your code will look a bit different based on the scenario