Ionic 2 increment decrement quantity for each product

Question

So i wanted to input quantity for each product, but everytime I click the increment button, the other products is also incremented, How do I increment the quantity of the product without affecting the other ? Also, I want to calculate the amount due by multiplying its quantity with the price, how should I do this ?

[![enter image description here][2]][2]

You are using a common/single varable 'currentNumber' to all products. Use seperate variable 'currentNumber' for each product like 'product.PCode' — Sabari, Aug 21 '17 at 17:37
The next time please add the actual code instead of an image of it, so it's easier to include it in the answers :) — sebaferreras, Aug 21 '17 at 19:11

sebaferreras · Answer 1 · 2017-08-21T20:23:14.073

0

In your component code, first initialize a quantity property for each product in the productlist

// After getting the list of products...
this.productlist.foreach(product => { product.quantity = 0; });
// ...

Also update the decrement and increment functions to receive the product that should be modified:

increment(product: any) {
  product.quantity++;
}

decrement(product: any) {
  if(product.quantity > 0) {
    product.quantity--;
  }
}

Now in the view, you can use the new quantity property to show the quantity multiplied by the price. Also notice that now we sent the product to the increment and decrement functions:

<ion-icon ... (click)="decrement(product)"></ion-icon>
{{ product.quantity * product.PPrice }}
<ion-icon ... (click)="increment(product)"></ion-icon>

edited Aug 21 '17 at 20:23

answered Aug 21 '17 at 19:11

sebaferreras

44,206
11
116
134

1

Why is it that the value of product.quantity is NaN ? how should i fix it ? – ynnhoj24 Aug 22 '17 at 01:05
Have you added this line of code in the component code, as soon as you get the list of products? `this.productlist.foreach(product => { product.quantity = 0; });` – sebaferreras Aug 22 '17 at 04:15
1

@sebaferreras I have just one component to calculate the quantity but when I increment and decrement the {{quantity}} it doesn't update in the view unless I do some randon clicks in the UI any guesses? – Fernando Zamperin Oct 10 '17 at 19:02
1

Could you please take a look at **[this answer](https://stackoverflow.com/questions/38174997/angular-2-ionic-2-detect-if-an-object-was-modified/38180523#38180523)** to see if `NgZone` helps Angular detecting that the view needs to be updated? @FernandoZamperin – sebaferreras Oct 10 '17 at 19:12
1

Hi @sebaferreras I saw an article explaining about NgZone and yes you're right that worked thanks a lot!! – Fernando Zamperin Oct 10 '17 at 20:43
So glad to hear that @FernandoZamperin :) – sebaferreras Oct 10 '17 at 21:33

score 0 · Answer 2 · answered Aug 22 '18 at 19:16

<ion-card *ngFor="let product of cart; let index=index">

<strong> ₹ {{ item_qty *  product.price  }}</strong>

<ion-card>


import { Component, OnInit } from '@angular/core';
import {  NavController, NavParams } from 'ionic-angular';

@Component({
selector: 'page-cart',
templateUrl: 'cart.html',
})
export class CartPage implements OnInit {

 item_qty:any;

constructor()
{this.item_qty=1;}

// increment item 
inc(){
this.item_qty += 1;
console.log(this.item_qty + 1);
}

//decrements item

dec(){
if(this.item_qty-1 < 1){
  this.item_qty = 1;
  console.log('item_1->' + this.item_qty)
}
else{
  this.item_qty -= 1;
  console.log('item_2->' + this.item_qty);
}
}

}

Ionic 2 increment decrement quantity for each product

2 Answers2