How to programmatically close ng-bootstrap modal?
I\'ve got a modal:
-
Unlike TBrenner i couldn't' just use
modalReference: any;I run with:
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9", with angular 5I had to import in my app.module.ts
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';and of course add it to the providers:
providers[ NgbModal]once it's done here is the code from the modal component:
import { Component, Input } from '@angular/core'; import { ModalDismissReasons, NgbModal, NgbModalRef } from '@ng bootstrap/ng-bootstrap'; export class MyClass { modalReference: NgbModalRef; constructor(private modalService: NgbModal) open(content) { this.modalReference = this.modalService.open(content); this.modalReference.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } JoinAndClose() { this.modalReference.close(); }https://ng-bootstrap.github.io should add some information about the reference importance.. I struggled a little bit to understand I needed to create a reference to access the ".close()" method. Thanks you all, it helped a lot!
讨论(0) -
In my opinion: the modal is responsible for closing itself and not the caller of the modal.
A modal can simply access the
NgbActiveModalclass, through the injector, and close itself by either calling the close or dismiss function.import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; export class Modal { constructor(private activeModal: NgbActiveModal) { } public submit() { this.activeModal.close(/* your result */); } public close() { this.activeModal.close(); } }讨论(0)
加载中...
- 热议问题