jQuery Bootstrap 4打字稿。 使用jQuery关闭模式不起作用

Question

I am attempting to use jquery to close a bootstrap modal on an angular project in typescript code.

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">&times;</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">&times;</span>
    </button>
  </div>
  <div class="modal-body table-responsive">
    <table class="table table-hover">
      <thead>

....

and the code in my typescript

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');


  }

but the modals do not change.

Is there something I haven't set up right

Answer 1

Change like this it may be work for you let try this once.

change your html file,

<ng-template #createProp let-c="close" let-d="dismiss">

to <div class="modal" id='createProp'></div>

typescript file,

$('#createProp').modal('toggle');

use this above line for wherever you want to close your modal.

Make sure you have included jquery plugin in your app and declared variable

declare var $: any;

angular.cli.json

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

For more reference,

Close Bootstrap Modal https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176