modal is shown but i can not edit it

Question

hi i am new to bootstrap and angular 7 , i am developing a web site that contains a button when you click it a modal popup by the help of the bootstrap guide i tried to do so , as you can see in the example works fine but when i tried to use it in my application it did not work properly the model shows up fine but i can not edit any field on it or press any button as you can see in the picture and i am getting this error

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).modal is not a function
    at HTMLButtonElement.<anonymous> (cadre-vague.component.ts:16)
    at HTMLButtonElement.dispatch (jquery.js:5233)
    at HTMLButtonElement.elemData.handle (jquery.js:5040)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)

i tried to fix it by my self but i failed so i am asking for your help this is my code :

<!-- Button trigger modal -->

<button class="btn  ajouter" id="ajoutbtn" style="color: white ;background: #4183c4"  data-toggle="modal" data-target="#ajoutModal">ajouter</button>
<!-- Modal ajout -->
<div class="modal fade" id="ajoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
   <app-ajout></app-ajout>
  </div>
</div>

this is ajout component

<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="ajoutmodel">Ajouter un nouveau cadre vague :</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form class="form justify-content-between">
     <div class="row">
       <div class="col-sm-6">
      <div class="form-group">
        <label >vague:</label>  <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >Reference CUI:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >Coordonnées poste insertion manuelle:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >temps de cylcle:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>
       </div>
       <div class="col-sm-6">
      <div class="form-group">
        <label >Tag RFID:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label ></label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >produit:</label>
        <select class="form-control bg-transparent" #value id="sdept" name="deplist" (click)="ajouter(value.value)" >
          <option>prod1</option>
          <option>prod2</option>
          <option>prod2</option>
          <option>Ajouter</option>
        </select>      </div>

      <div  [hidden]="value.value!='Ajouter'" >
        <div class="form-group">
          <label >nouveau produit :</label>
          <input type="text" class="bg-transparent border bord form-control" >
        </div>

      </div>
       </div>

     </div>
    </form>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
    <button type="button" class="btn btn-primary">Enregistrer </button>
  </div>
</div>

and i added this to my .ts file

ngOnInit() {
    $('document').ready(function() {
      $('#ajoutbtn').click(function() {
        $('#ajoutModal').modal('show');
      });
    });  }