Kesem David Kesem David - 2 months ago 52
Javascript Question

Cannot close ng-bootstrap Modal

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

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

Comments