Modal event is not working angular 2 - twitter-bootstrap-3

Question

I am trying to clear form values when modal is hidden using its event but it not working I am referencing all the required files but it not trigger. Below I attach the code of my client side. I am using it in my angular 2 application as an component.
html
<script src="../../../Scripts/bootstrap.min.js"></script>
<script src="../../../Scripts/jquery-2.2.0.min.js"></script>
<script>
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('form')[0].reset();
});
</script>
<button type="button" class="btn-u pull-right margin-bottom-10" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus" aria-hidden="true"></span> Invite User</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Invite User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="InviteUserForm">
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" [(ngModel)]='inviteUser.username' class="form-control" ngControl="username" required>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" required [(ngModel)]='inviteUser.email' class="form-control" ngControl="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-glass"></i></span>
<select [(ngModel)]='inviteUser.partnerId' class="form-control" ngControl="partner" required>
<option>Select one</option>
<option *ngFor="let partner of _partners" value={{partner.Id}}>
{{partner.Name}}
</option>
</select>
</div>
</form>
<button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>
<button type="button" [disabled]="!InviteUserForm.valid" class="btn-u pull-right" (click)="Invite(inviteUser)" data-dismiss="modal">Invite</button>
</div>
</div>
</div>
</div>

Answer 1

You can use angular2 bootstrap modal as https://github.com/dougludlow/ng2-bs3-modal. You can import this plugin into your project.

Answer 2

use this code
constructor() {
this.activate();
}
activate() {
////This event is fired immediately when the hide instance method has been called.
///called to reset the events and the headers.
$('#myModal').on('hidden.bs.modal', function () {
////debugger;
// do your work over here
console.log("modal is closed hidden");
})
////This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
///called to reset the events and the headers.
$('#myModal').on('hide.bs.modal', function () {
////debugger;
// do your work over here;
console.log("modal is closed hide");
})
}