I want user click the Submit button and the modal close automatically.
If I add data-dismiss="modal"
in the Submit <button>
, it won't run submitComments()
.
I tried to do something like $('#myModal').modal('hide');
, but not succeed.
So how can I close a modal in Angular 2? Thanks
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form (ngSubmit)="submitComments()">
<div class="form-group row">
<label class="form-control-label col-sm-2">Comments:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
.
submitComments() {
// I want to do something like $('#myModal').modal('hide'); here.
}
Using @ViewChild
add #closeBtn
to the element with data-dismiss="modal"
<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
<div class="modal fade" id="yourModalId">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
using this.closeBtn.nativeElement.click();
to trigger click event will close your modal.
import {ViewChild, ElementRef} from '@angular/core';
@Component({
moduleId: ...,
selector: '.',
templateUrl: '.',
styleUrls: ['.']
})
export class yourClass {
@ViewChild('closeBtn') closeBtn: ElementRef;
yourFunction() {
//do something
...
...
//close your modal
this.closeModal();
}
//call this wherever you want to close modal
private closeModal(): void {
this.closeBtn.nativeElement.click();
}
}
You can do it by simply declaring jQuery variable with any type inside Angular2 controller.
declare var jQuery:any;
Add this just after import statements and before component decorator.
Then access bootstrap modal with it's id like this.
jQuery("#myModal").modal("hide");
Apart from the @MattScarpino's answer another alternative is just change your button type to button
from submit
and call your function submitComments()
and at the same time call dismiss-modal
. by doing so you able to dismiss modal and call function too at the same time hope this may help you. here is example:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group row">
<label class="form-control-label col-sm-2">Comments:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
if you wish to close modal from your controller side you can use using this way
$("#myModal").modal("hide");
First, set the div's hidden
property equal to a variable:
<div id="myModal" [hidden]="hideModal" class="modal fade">
Second, in the class, define a boolean named hideModal
and set it to false:
hideModal: boolean = false;
Third, in submitComments()
, set hideModal
to true.
Perfect answer in this universe.........................
step 1 : give unique id to the dismiss button of modal
step 2 : after successfully submitted form or finishing task call
document.getElementById("addProductCloseButton").click();
in your class
Try not to include the form in your modal body instead add two buttons for the same in your footer section.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<label class="form-control-label col-sm-2">Comments:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
</div>
I have done it like this and it works for me perfectly.
var element = document.getElementById("CloseButton") as any;
element.click();
Where my CloseButton
is bootstrap close button.
i use one of the answer and with some edit its work perfectly for me, i hope it can help for try it change "yourmodal" to modal name that is your target you should use button Instead of i
<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
<div style="margin-top: 0px !important;">
<button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button>
<modal #yourModal>
<ng-template #modalHeader>
<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
</ng-template>
<ng-template #modalBody>
<yourmodalSelectorname></yourmodalSelectorname>
</ng-template>
<ng-template #modalFooter></ng-template>
</modal>
</div>
import {ViewChild, ElementRef} from '@angular/core';
@Component({
moduleId: ...,
selector: '.',
templateUrl: '.',
styleUrls: ['.']})
yourFunction() {
//do something
...
...
//close your modal
this.closeModal();
}
//call this wherever you want to close modal
private closeModal(): void {
this.closeBtn.nativeElement.click();
}
I have got a better solution. when you open your modal, save the modal reference :
this.modalRef = this.modalService.open()
and then when you need to close the modal simply :
this.modalRef.close()
this is the easy step to close popup modal in angular in you component.ts file include these line
import '../../../assets/js/custom.js';
declare var closepopup:any;
the custome file path depend on your directory stracture
in custome file include this funnction
function closepopup()
{
$(".modal").modal('hide');
}
after this if you have condition on form validion event form data validated then you want to close popup modal then include this line
closepopup();
if you still facing issue then inform me i will be there for you
Just declare an id = "close_model" in dismiss button and put this code in the function where you want to close the model ::
window.document.getElementById("close_model").click() ;
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.