Can't close ng-bootstrap modal

Question

So, I have NgbModal with a form in it, and I want to achieve its closure upon successful submission.

This is my ModalComponent:

 @Component({ selector: 'create-update-transaction', templateUrl: './CreateOrUpdateTransaction.html', providers: [AccountTransactionsService] }) export class CreateOrUpdateTransactionComponent { closeResult: string; modalRef: NgbModalRef; @Input() transaction: Transaction = new Transaction(); @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>(); constructor(private modalService: NgbModal, private transactionsService: AccountTransactionsService) {} sendTransaction(): void{ let localModalRef = this.modalRef; this.transactionsService.createOrUpdateTransaction(this.transaction, (isSuccessful)=>{ if (isSuccessful) { this.onSubmit.emit(); localModalRef.close(); //<--- The problem is here } }); } open(content) { this.modalRef = this.modalService.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } } 

I get localModalRef.close is not a function error when I try to call the closure method of a saved NgbModalRef

Answer 1

This should work for you:

 open(content) { this.modalRef = this.modalService.open(content); this.modalRef.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } 

Otherwise, your modalRef variable will reference the ZoneAwarePromise object ZoneAwarePromise