Failed to use jquery in Angular

Question

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:-

I don't understand how I use jQuery in angular10. Where will I write the jQuery code? Please help me.

the errors you're showing is just Typescript saying you did not explicitly declare a TYPE for your parameter, so ts refers to it as "any". it should not stop you. lets go back to basics though, why do you believe you need Jquery ? there are little to no valid reasons to use JQuery in 2020, let alone within an Angular project. — Stavm
– Stavm, Commented Jan 14, 2021 at 8:01
@Stavm i need use jquery because of many things. i used my jquery code "details.component.html" in the script. but it's code not work. please suggest where I will write jquery code in angular10. — user14344635
– user14344635, Commented Jan 14, 2021 at 8:10
actually, i need this jsfiddle.net/polaszk/1oyfxoor for that I used jquery. — user14344635
– user14344635, Commented Jan 14, 2021 at 8:11
idk what's the actual issue. start by addressing the issues you added in the image by changing function signature from incrementValue(e) to incrementValue(e: any). do the same for all functions ts complains about. — Stavm
– Stavm, Commented Jan 14, 2021 at 8:12

James D · Accepted Answer · 2021-01-14 09:16:05Z

I don't see the reason to use jQuery when you're using the angular framework for this specific case.

You should be using two-way binding and click events to trigger everything. Here's a Stackblitz demo.

Ref docs for two-way binding, ref docs for event binding

In my component I have:

export class AppComponent {
  quantity = 0;

  decrementValue() {
    this.quantity > 0 ? this.quantity-- : (this.quantity = 0);
  }

  incrementValue() {
    this.quantity++;
  }
}

In my HTML I have (I copied your code and added the two-way binding and event handling)

<div class="input-group">
    <input type="button" value="-" class="button-minus" data-field="quantity" (click)="decrementValue()">
    <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field" [(ngModel)]="quantity">
    <input type="button" value="+" class="button-plus" data-field="quantity" (click)="incrementValue()">
</div>

Gaurav Patil · Accepted Answer · 2021-01-14 08:53:19Z

0

You have added incrementValue(e) and decrementValue(e) inside ngOnInit() {} remove functions and jQuery click from ngOnInit() and place it outside ngOnInit()

Also add type in function like incrementValue(e: any)

answered Jan 14, 2021 at 8:53

Gaurav Patil

1,41212 silver badges20 bronze badges

Collectives™ on Stack Overflow

Failed to use jquery in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related