How to close modal after form submit event in Angular2? - html

Question

I want to close modal after form submit event is finished. I've done following things:
<form [formGroup]="alertForm" novalidate (ngSubmit)="save(alertForm.value, alertForm.valid)">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="input-field">
<div class="form-group input-field">
<label for="recipientLogin">Available Recipient</label>
<textarea class="form-control validate" id="recipientLogin" required formControlName="recipientLogin"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<select class="form-control" id="alert_level" formControlName="alert_level">
<option value="0" selected> Emergency </option>
<option value="1">Major</option>
<option value="2">Minor</option>
<option value="3">Information</option>
</select>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="subject">Subject</label>
<input type="text" class="form-control validate" id="subject" required formControlName="subject">
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="message">Message</label>
<textarea class="form-control validate" id="message" required formControlName="message"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<input type="file" class="form-control" id="media1" />
<input type="file" class="form-control" id="media2" />
<input type="file" class="form-control" id="media3" />
</div>
</div>
</div>
<div>
<div class="col s6">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" class="btn btn-default input-field">Send</button>
</div>
</div>
<div class="col s6 right-align">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" data-dismiss="modal" class="btn btn-default input-field">Close</button>
</div>
</div>
</div>
</form>
This triggers save() on form submit but does not close the modal for that I tried data-dismiss="modal" on save button, which block the save() call and close the modal.
I want to complete save() first after that close modal.

Answer 1

Assuming the form is inside a bootstrap modal, you can use
$('#modalID').modal("hide") to close the modal.
For full reference check here.

Answer 2

Alternatively, on success of your save call you can close the modal via the 'Close' button.
<button #btnId type="submit" />
Which your component can close via this.btnId.click()