Failed to use jquery in Angular

I am trying to create a +/- Quantity box. for that i used here jquery code. when i used this, I found an error. here is my code:-

details.component.ts



import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  
    function incrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal)) {
        parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    function decrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal) && currentVal > 0) {
        parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    $('.input-group').on('click', '.button-plus', function(e) {
      incrementValue(e);
    });
    
    $('.input-group').on('click', '.button-minus', function(e) {
      decrementValue(e);
    });
    

  }

  

}


details.component.html

<app-home></app-home>
<br/><br/>




<style>
 
input,
textarea {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 10px;
}

input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}
</style>







<div class="row container mt-5 mr-5">
<div class="col-3 mr-2">
<h6>CATEGORIES</h6>
<hr>
<small><b>BRACELETS</b></small>
<br/><br/>
<small><b>EARRINGS</b></small>
<br/><br/>
<small><b>NECKLACES</b></small>
<br/><br/>
<small><b>RINGS</b></small>
<br/><br/>


</div>




<div class="col-3">

    
   
</div>


<div class="col-5 offset-1">
   
    
        <p><b>Quantity</b></p>
        <div class="input-group">
            <input type="button" value="-" class="button-minus" data-field="quantity">
            <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
            <input type="button" value="+" class="button-plus" data-field="quantity">
          </div>
          
</div>


</div>



 <router-outlet></router-outlet>



angular.json


//other code
           "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.cs",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          }
        },


//other code

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}


when i run this application i found this error:-

enter image description here

I don’t understand how I use jquery in angular10.Where I will write the jquery code?I am an absolute beginner. please help me.

Source: AngularJS Questions