CODEWITHSUNDEEP
angularangular5
roopteja
roopteja

Reputation: 743

How to get the individual count value from below cart items list in angular?

I have the html code like this.

<div *ngFor="let item of items">
      <div class="card col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12">
        <div class="  col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12" style="display:flex">
          <div class="my-2 mx-10 col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
            <h5 class="item-heading">{{item.title}}</h5>
            <p>{{item.description}}</p>
          </div>
          <div class="my-4 col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
            <strong>&euro;{{item.Price}} </strong>
          </div>
          <div class="mx-10 col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 p-0 m-0 d-flex " >
            <button class="Increment p-0 " (click)="Increment({{item.count}})" >+</button>
            <button class="Decrement p-0 " (click)="Decrement({{item.count}})">-</button>
            <!-- <div class="middle-part"><input  class="quantity" class=" col-6 quantity" type="number"></div> -->
            <input class=" col-5 py-3 quantity" type="number" value="{{item.count}}">
          </div>
        </div>
      </div>
    </div>

In my ts I have 

import { Component, OnInit } from '@angular/core';
import { CartItemsList,cartItemsArray } from './CartItemsList';
@Component({
  selector: 'app-cart-items-component',
  templateUrl: './cart-items-component.component.html',
  styleUrls: ['./cart-items-component.component.css']
})
export class CartItemsComponentComponent implements OnInit {
  count:number=0;
  items = cartItemsArray;
  item = this.items[0];
  constructor() { }
  ngOnInit() {
  }
  Increment(item)
  {
    item.count +=1;
  }
  Decrement(item)
  {
    item.count -=1;
  }
}

Now when I execute this i am getting all the count values incremented or decremented. I need to store individual count values for each item.

In the cartItemsList.ts the code is as follows.

export class CartItemsList
{
    title:string;
    Price:number;
    description:string;
    count:number;
}
export const cartItemsArray: CartItemsList[] = [
    { title: 'Boulette Speciale', Price: 150 , description:'A product' , count:0},
    { title: 'Campagne Supreme', Price: 220 , description:'B product'  , count:0 },
    { title: 'Boulette Speciale', Price: 250 , description:'C product' , count:0 },
    { title: 'Campagne Supreme', Price: 300 , description:'D product'  , count:0 }
  ];

Upvotes: 0

Views: 1797

Answers (1)

JuanDM
JuanDM

Reputation: 1330

My suggestion is to pass an item object to the function and update the count of this object.

in html file

<button class="Increment p-0 " (click)="Increment(item)" >+</button>

In .ts file

Increment(item)
{
   item.count +=1;
}

Upvotes: 2

Related Questions