Angular is updating all fields simultaneously when it should just upda

Question

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.name], [product.price], int)">
<div id="cartItemsList">
<ul>
<li>
<div name="product_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>
</li>
</ul>
</div>
</form>

in my controller:

int: number=1;
i=0;

plus(){
this.i++;
this.int=this.i;
}


minus(){
this.i--;
this.int=this.i;
if (this.i < 0) {
this.i = 0;
this.int=this.i;
}
}