How to programmatically close ng-bootstrap modal?
I\'ve got a modal:
-
You have
let-dorlet-cin<template #warningModal let-c="close" let-d="dismiss">as variables, both are functions. So, the simple way to do it is: pass incordinto submit as argument like this(click)="submit(c)"or(click)="submit(d)"and then in the function just callsubmit(c){ c('close modal'); }. Hope that works for you.讨论(0) -
If you are using https://ng-bootstrap.github.io/ (as indicated in your question) things are extremely simple - you can just open a modal and either close it from a template (as in your code) or programmatically (by calling
close()method on the returned Object of typeNgbModalRef).Here is a minimal example showing this in action: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview
You might be either confusing different libraries or maybe there is sth more to your question but it is hard to say more based just on the info provided.
讨论(0) -
What you've done with
@ViewChild('warningModal') warningis get the TemplateRef you used as in your modal, not the actualNgbModalRef.It depends how you open up your modal, if you open it programmatically you should receive the
NgbModalRefobject which you could call.closeon.讨论(0) -
You can simply close the modal by below way.
First when we open the Modal
this.modalService.open(content, { size: "lg" }).result.then( result => { this.closeResult = `Closed with: ${result}`; }, reason => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }After That in TS For closing use this
this.modalService.dismissAll();讨论(0) -
To expound upon pkozlowski.opensource's response, the way I actually got the reference to the NgbModalRef class was by modifying what is in his plunker on the this.modalService.open as follows:
this.modalReference = this.modalService.open(content); this.modalReference.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; });Then I was able to call:
this.modalReference.close();Which worked like a charm. Oh, and don't forget to put define modalReference at the top of the class:
modalReference: any;讨论(0) -
To open the modal
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; modalReference = null; constructor(private modalService: NgbModal) { } openVerticallyCentered(content) { this.modalReference = this.modalService.open(content, { centered: true }); }to close the modal using the reference, like Amit said
this.modalReference.close();source:https://ng-bootstrap.github.io/#/components/modal/examples
讨论(0)
加载中...
- 热议问题