Trying to make use of jquery to close a bootstrap modal within an angular project using typescript code.
The following is the code:
function call in html:
(click)="populaterfpfromsaved(i, createSaved, createProp)"
createSaved and createProp are local references on modals
here they are on the modals:
<ng-template #createProp let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Request For Proposal</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
....
<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Saved RFPs</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body table-responsive">
<table class="table table-hover">
<thead>
....
and the typescript code snippet
populaterfpfromsaved(index, create, prop){
console.log('it fired to open the rfp modal');
const scoperfp = this.savedrfps[index];
this.savedevent.name = scoperfp.eventname;
this.savedevent.date = scoperfp.datename;
this.savedevent.programdate = scoperfp.datevalue;
this.savedevent.dateflex = scoperfp.dateflex;
this.savedevent.eventpurpose = scoperfp.eventpurpose;
this.savedevent.starttime = scoperfp.startime;
this.savedevent.starttimeflex = scoperfp.starttimeflex;
this.savedevent.endtime = scoperfp.endtime;
this.savedevent.endtimeflex = scoperfp.endtimeflex;
this.savedevent.headcount = scoperfp.headcount;
this.savedevent.eventdetails = scoperfp.eventdetails;
(<any>jQuery(create)).modal('hide');
(<any>jQuery(prop)).modal('show');
}
However, the modals remain unchanged.
Could there be something misconfigured?