Cannot close ng-bootstrap Modal

Question

So I have a NgbModal with a form in it, and what I want to achieve is closing it on successful submit.

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 receive localModalRef.close is not a function error when trying to invoke the close method of the 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 to ZoneAwarePromise object