CODEWITHSUNDEEP
angular
Folky.H
Folky.H

Reputation: 1204

Angular2 - How to make changes on a specific element?

I have multiple (Add to cart) button on my page, I set the (Add to cart) button to change on (click), so the user can add remove items from the cart seamlessly. The issue is that if the user clicks on one of the buttons all of them changes! Simply because the code does not recognize at which button the user clicked. In the normal scenario, the button that should change is the only one the user clicked-in! But unfortunately, I don't know how to do it in Angular2. Thanks for your help!

JS:

     addToCart(){
     if (this.amount == 0) {
        this.isCartEmpty = true;
     } else if  (this.amount > 0) {
         this.isCartEmpty = false;
     }   
     }

   addItem() {
    this.amount++;
  }
   removeItem() {
    this.amount--;
  }

HTML: 

    <div *ngIf="isCartEmpty" (click)="addToCart()">ADD TO CART</div>
    <div *ngIf="!isCartEmpty" (click)="addToCart()"><div>

    <div>Element 1</div>
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div>
    </div>

    <div>
    <div>Element 2</div>
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div>
    </div>

    <div>
    <div>Element 3</div>
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div>
    </div>

Upvotes: 0

Views: 416

Answers (2)

Carlos Mermingas
Carlos Mermingas

Reputation: 3892

You probably should create your cart as a component:

my-cart.component.ts

import {Component} from '@angular/core';

// Creating model here for simplicity. Should be in its own file

export class CartItem {
  public constructor(public name, public amount) { }

  public addItem() {
    this.amount++;
  }

  public removeItem() {
    if (this.amount > 0) {this.amount--};
  }
}

@Component({
  selector: 'my-cart',
  template:`
  <p>My Cart</p>
  <button (click)='addCartItem()'>Add Cart Item</button>a
  <button (click)='cleanCart()'>Clean Cart</button><br>
  <ul>
    <li *ngFor="let item of cartItems">
      {{item.name}}, Amount = {{item.amount}}
      <button (click)='item.addItem()'>Add</button>
      <button (click)='item.removeItem()'>Remove</button>
    </li>
  </ul>
  `
})
export class MyCart {
  private cartItems: [CartItem] = [];

  public addCartItem() {
    this.cartItems.push(new CartItem('Cart item', 1))
  }

  public cleanCart() {
    this.cartItems = this.cartItems.filter(
      (current, i, array) => current.amount > 0;
    )
  }
}

Check it out in Plunker

Upvotes: 1

VRPF
VRPF

Reputation: 3118

Why do you have 3 different button to increment the same amount variable ?

Are each of these supposed to be three different items ?

Assuming you want 3 different items you could do something like:

items = ['A', 'B', 'C']

amount = [0, 0, 0]

addItem(index) {
    this.amount[index]++;
}
removeItem(index) {
    this.amount[index]--;
}

html:

<div *ngFor="let item of items; let i = index">
    <div (click)="removeItem(i)">-</div> 
    <div>{{amount[i]}}</div> 
    <div (click)="addItem(i)">+</div>
</div>

This should give you an idea. You'll need to fix the code a bit.

Upvotes: 0

Related Questions