Angular2 ng-bootstrap Modal close in component

Question

I will close a bootstrap modal in my component via save when input is ok. I'm using angular v2.4.1 and ng-bootstrap 1.0.0-alpha.19

I've tried this solution but I get following error:

No provider for ViewContainerRef

I tried to add ViewContainerRef to my module.ts but I get following error:

Type 'typeof ViewContainerRef' is not assignable to type 'Provider'

Here the code in my component:

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: '[add-name]',
    templateUrl: '../add-name.html'
})

export class MyComponent {   
   public errorMessage: string = '';

   constructor(public modalActive: NgbActiveModal) {}

   public saveNewStuff(name: string) {
        this.errorMessage = '';

        if (name === '' || name === undefined) {
            this.errorMessage = 'some message';
        } else if (this.errorMessage === '') {
            this.modalActive.close();
        }
    }
}

I also tried to use NgbModalRef like

  constructor(public modalRef: NgbModalRef) {}

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

But this is not working at all. I not even getting an error message.

Answer 1

You have to save the reference to the openend modal window to close it later like:

public mr: NgbModalRef;
...
public openModal(content: string) {
    this.mr = this.modalService.open(content);
}
...
public closeModal() {
   this.mr.close();
}