I've got a modal:
<template #warningModal let-c="close" let-d="dismiss">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
The numbers you have entered result in negative expenses. We will treat this as $0.00. Do you want to continue?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button>
<button type="button" class="btn btn-secondary" (click)="submit()">Yes</button>
</div>
</template>
Whenever I click yes, I want it to call a function and close itself.
In my controller, I have @ViewChild('warningModal') warning;
and in submit()
, I have this.warning.close();
, but I get this.warning.close is not a function
whenever I click Yes.
How do I get this to work the way I want it to?
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;
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 type NgbModalRef
).
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.
Unlike TBrenner i couldn't' just use modalReference: any;
I run with:
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
with angular 5
I 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!
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();
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
You have let-d
or let-c
in <template #warningModal let-c="close" let-d="dismiss">
as variables, both are functions. So, the simple way to do it is: pass in c
or d
into submit as argument like this (click)="submit(c)"
or (click)="submit(d)"
and then in the function just call submit(c){ c('close modal'); }
submit(c){ c('close modal'); }
. Hope that works for you.
What you've done with @ViewChild('warningModal') warning
is get the TemplateRef
you used as in your modal, not the actual NgbModalRef
.
It depends how you open up your modal, if you open it programmatically you should receive the NgbModalRef
object which you could call .close
on.
In my opinion: the modal is responsible for closing itself and not the caller of the modal.
A modal can simply access the NgbActiveModal
class, 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();
}
}
There was a hacky way to do this from a centralized app component level
this._platformLocation.onPopState(() => {
document.getElementsByClassName('modal-header')[0].getElementsByTagName('a')[0].click();
});
this should be placed inside the constructor in app.component.ts file.
All you have to do is:
Import NgbModalRef
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
Set type
modalRef: NgbModalRef;
Html:
<button (click)="openModal(myModal)"></button>
Component:
openModal(content: any) {
this.modalRef = this.modalService.open(content);
}
Then add this in a function where you want to call the close
this.modalRef.close();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.