how to pass input tag value to a (click) function and use in service angular 8

Question

This is my component.html, Here I want to get value from numberQuantity input field and pass it to (click) function and use in service function "removeProduct".

<input #numberQuantity type="string" name="quant" id="numberQuantity" >

                <button (click)="removeProduct(user, numberQuantity.value)">Remove quantity</button>

This is my part of cart.service code

async removeProduct(productData, value){
var removeItem;
 console.log(value);
 removeItem = productData['quantity'];
 removeItem = removeItem -value;

What are you trying should work. What's the issue with it?

Maihan Nijat
– Maihan Nijat

2020-01-22 16:12:13 +00:00
Commented Jan 22, 2020 at 16:12 — Maihan Nijat
– Maihan Nijat, Commented Jan 22, 2020 at 16:12

Gangadhar Gandi · Accepted Answer · 2020-01-22 16:20:37Z

3

Try using ngModel to the text field, where we can access the value directly in component ts file with out sending from html.

.html

In html, you mentioned input type="string", change it to input type="text"

<input #numberQuantity type="text" name="quant" id="numberQuantity" [(ngModel)]="quantityValue" >
<button (click)="removeProduct(user)">Remove quantity</button>

.ts

quantityValue: string;

removeProduct(user) {
   console.log(this.quantityValue); // we can access quantityValue here since it is declared as ngModel in html
   ...
   ...
   // We can call a method in service from here by sending this.quantityValue to service method.
}

edited Jan 22, 2020 at 16:20

answered Jan 22, 2020 at 16:08

Gangadhar Gandi

2,26214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to pass input tag value to a (click) function and use in service angular 8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related