Angular 4: Close modal after form submit event is finished

If you want to close modal from component then you can use

$("#createLabel").modal("hide"); 

Else you can change the type of sumbit button from 'submit' to button and use as follows

<button type="button" (click)='onsubmit()' data-dismiss="createLabel">Create</button> 

this will close your modal and call you submit function at the same time.

You don't have to use jQuery or other external libraries when you're using Angular. All you need is an EventEmitter that emits an event when the form is submitted.

Look at this code sample I made:

First the code for the modal

modal.component.html

<div> <h1>This is my modal</h1> <button (click)="onCloseModal($event)">Submit form</button> </div> 

modal.component.ts

@Component({ selector: 'app-modal', templateUrl: './modal.component.html', styleUrls: ['./modal.component.scss'] }) export class ModalComponent { @Output() closeModalEvent = new EventEmitter<boolean>(); constructor() { } onCloseModal(event: any){ this.closeModalEvent.emit(false); } } 

Now the code for the parent

parent.component.html

<div> <app-modal [modalVisible]="isVisible" (closeModalEvent)="onClose($event)"></app-modal> <button (click)="showModal()">open modal</button> </div> 

parent.component.ts

@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.scss'] }) export class ModalComponent { modalVisible = false; constructor() { } onClose(isVisible: boolean){ this.modalVisible = isVisible; } showModal(){ this.modalVisible = true; } } 

the easy way to close popup modal on submit is this

<a class="confirm" data-dismiss="modal" (click)="save()">Confirm</a> 

It looks like to me you have a couple of options here.

1.) Add the data-dismiss to your Create button as well.

2.) You can use @ViewChild from @angular/core and JQuery to get reference to the modal and then on click of Create you can close it.

For the second option you will have to import JQuery into your project, whatever that means for you. Then you can use ViewChild with JQuery like this:

@ViewChild('completeModal') completeModal: ElementRef; $(this.completeModal.nativeElement).modal('hide'); 

in your case the simplest and most reliable method at the same time :

 <div class="modal fade" id="createLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New project</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form name="form" #f="ngForm" novalidate > <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }"> <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname" [(ngModel)]="createLabel.projectname" minlength="3" #projectname="ngModel" required /> <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div> </div> <div class="form-group" > <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button [disabled]="!f.form.valid" (click)="newproject(createLabel)" data-dismiss="modal" type="button" class="btn btn-primary" >Create</button> </div> </form> </div> </div> </div> 

you can close modal on inside the ngSubmit function in .ts file

.ts File

(Submitfunction){ //function of modal submit button $('#mymodalname').modal('hide'); } 

In angular use jQuery instead of $ because you can easily identify

declare var jQuery:any; 

For close write the below line in your component

jQuery("#myModal").modal("hide"); 

Or

 jQuery('#addEditUserModal').modal('toggle');