All of the text inputs are updating when I click on just one button

Question

I have a component with an increment and a decrement button. I loop through the products and the buttons show up next to each product. When I click on one of the buttons, all of the text inputs update, not just the one that I clicked on.

COMPONENT HTML:

<div *ngFor="let product of products">

<button (click)="minus()" type="button">
-
</button>
<input id="number" type="text" value="1" [(ngModel)]="count">
<button (click)="plus()" type="button">
+
</button>
</div>

COMPONENT TYPESCRIPT:

count: number = 1;
plus(){
        this.count++;
    }
    
minus(){
      if (this.count > 1) {
        this.count--;

      }  
    }

When I use:

<div *ngFor="let product of products; let i = index">
<input id="number" type="number" value="1" [(ngModel)]="products[i].count">
</div>

I get the error: Property 'count' does not exist on type '{ id: number; name: string; price: number; description: string; }'.

When I use:

<input id="number" type="number" value="1" [(ngModel)]="product[i].count">

I get the error:

Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ id: number; name: string; price: number; description: string; }'. No index signature with a parameter of type 'number' was found on type '{ id: number; name: string; price: number; description: string; }'.

The products array is defined like this:

export interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

Answer 1

Its because they all reference the same variable because of the ngModel and the fact that you are iterating over your products and using a single input reference - so when you click your button and alter count - they will all update because they are all listening to the same variable.

<input id="number" type="text" value="1" [(ngModel)]="count">

In order to prevent this - you will need to apply a different ngModel reference for each and also change your increment and decrement function to apply to that item only.

<input id="number" type="text" value="1" (ngModel)]="products[index].count">

Answer 2

The problem here is that you define the same variable for different array elements. The solution is to assign a count value to each array element. For this, you need to update the count value of all array elements.

HTML

<div *ngFor="let product of products; let i=index">
  {{product.name}}
  <button (click)="minus(i)" type="button"> - </button>
  <input id="number" type="text" [value]="product.count"> 
  <button (click)="plus(i)" type="button"> + </button>
</div>

TYPESCRIPT

export class AppComponent implements OnInit {
  products: any[] = [
    { name: 'product 1' },
    { name: 'product 2' },
    { name: 'product 3' },
    { name: 'product 4' }
  ];
  count: number = 1;

  ngOnInit() {
    this.migrateAllProducts();
  }

  migrateAllProducts() {
    this.products.forEach(p => {
      p.count = this.count;
    });
  }

  plus(index: number) {
    this.products[index].count++;
  }

  minus(index: number) {
    if (this.products[index].count > 1) {
      this.products[index].count--;
    }
  }
}