Modal box is not working inside navbar tabs (bootstrap) - html

Question

I have been trying a lot of times but still no use i am not able to display my modal in the navbar tabs. When i click on it a blur is triggered. Can someone please help me?
MY Template,
addnewrecord() {
$('#editmodel').modal('show');
}
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="tabbable tabs-left mb-lg">
<ul id="tabs2" class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Home</a>
</li>
<li class="nav-item"><a class="nav-link active" [routerLink]="['/app/tables/basic']" data-toggle="tab">Chatter</a>
</li>
</ul>
<div id="tabs2c" class="tab-content bg-info-light">
<div class="tab-pane active">
<div class="page-title">
<div class="btn-group">
<button class="btn btn-sm btn-default" (click)='addnewrecord()'>
New
</button>
</div>
</div>
<div class="modal fade" id="editmodel" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form id='form' class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false" novalidate="novalidate">
<div class="form-group">
<label for="email">FirstName:</label>
<input type="text" [(ngModel)]='student.accountname' name='accountname' class="form-control" id="email" placeholder="Enter Firstname" required='required'>
</div>
<button type="submit" class="btn btn-primary" (click)='insertdata(student,student._id)'>{{buttonname}}</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)='resetform()'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Please try this code,
$('#editmodel').show();