Close active modal

Question

I have opened multiple modals in my angular project. I have made a modal component as wrapper for the content. Now I want to close the active modal instead of closing all modals. So the dismissAll need to be replaced. I have in mind to use NgbActiveModal but get an error as soon as I add this to the constructor.

The error message as appears in the browser

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NgbActiveModal -> NgbActiveModal -> NgbActiveModal]: NullInjectorError: No provider for NgbActiveModal! NullInjectorError: R3InjectorError(AppModule)[NgbActiveModal -> NgbActiveModal -> NgbActiveModal]: NullInjectorError: No provider for NgbActiveModal!

How to solve this?

My code

import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {faTimes} from '@fortawesome/free-solid-svg-icons';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';


@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
    @Input() titel: string = 'Editor';
    @Input() popupClass: string;
    @ViewChild('content') content: ElementRef;
    cross = faTimes;

    constructor(private modalService: NgbModal,
                private activeModal: NgbActiveModal) {
    }

    open() {
        this.modalService.open(this.content,
        {   ariaLabelledBy: 'modal-basic-title',
                        windowClass: this.popupClass
                }).result.then((result) => {}, (reason) => {
        });
    }

    close() {
        this.modalService.dismissAll()
    }
}

Answer 1

NgbActiveModal is only provided if you are passing a Component as the argument to the open() call.

You can either call the open function passing ModalComponent as your the fist argument:

this.modalService.open(ModalComponent, ...)

Or you need to use the open's call return value to close your modal by passing it as an @Input() to the component inside your 'content' that will be handling the close event. Something like this:

In your ModalComponent:

this.modalRef = this.open(this.content,...);

In your template:

<div #content>
    <some-child-component [modalRef]="modalRef"></some-child-component>
</div>

And the use the modalRef.close() in your code in the some-child-component.

Answer 2

You should keep a ref to the currently opened modal and close only that one:

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
    @Input() titel: string = 'Editor';
    @Input() popupClass: string;
    @ViewChild('content') content: ElementRef;
    cross = faTimes;
    private modalRef: any;

    constructor(private modalService: NgbModal) {
    }

    open() {
        this.modalRef = this.modalService.open(this.content,
        {   ariaLabelledBy: 'modal-basic-title',
                        windowClass: this.popupClass
                }).result.then((result) => {}, (reason) => {
        });
    }

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