Angular is updating all fields simultaneously when it should just update one

I have a *ngFor and I’m trying to update a number field on click but it updates all of the items with same value.

In my html:

<form *ngFor="let product of products" [formGroup]="myForm" name="myForm" (ngSubmit)="onSubmit([], [product.price], int)">
<div id="cartItemsList">
<div name="product_name">{{ }}</div>
<div><img src="../assets/images/gallery/{{product.thumbnail}}" /></div>
<div>{{product.price }}</div>
<button class="minus-btn" (click)="minus()" type="button" name="btn">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="int" formControlName="int" ng-model="quantity" ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus()" type="button" name="btn">
<img src="../assets/images/plus.svg" alt="plus" /></button>
<button type="submit" class="btnAddAction">Add to Cart</button>

in my controller:

int: number=1;


It’s a bit hard to read your code, but it looks like you are updating a global variable in your plus() function, so it makes sense that it would be updated globally.

When I make int private, the error is thrown that Property ‘int’ is private and only accessible within class ‘ShoppingCartComponent’ and it complains about my html: <input [value]=“int”>

Yes. If it’s private, the template can’t access it. It would still be global to the component, just private.