Hi there, I am new to using Angular and I'm currently facing an issue with increasing and decreasing product quantity on the cart page. The problem is that in my first index it works fine, but in the second index, the value starts with the first index value when incrementing the counter.
Here is a snippet of my HTML page:
<mat-card class="example-card" *ngFor="let searched of searchedDataResult; let indexOfelement=index;">
<div class="col-2 ">
<mat-form-field >
<button
mat-button
mat-icon-button
matPrefix
aria-label="Remove"
[color]="getColor()"
(click)="incrementValue(-1,indexOfelement)"
[disabled]="shouldDisableDecrement(searched._value)"
>
<mat-icon>remove</mat-icon>
</button>
<input
matInput
type="number" id="getval_{{indexOfelement}}"
value="{{searched._value}}"
(focus)="setColor('primary')"
(blur)="setColor('default')"
/>
<button
mat-button
mat-icon-button
matSuffix
aria-label="Add"
[color]="getColor()"
(click)="incrementValue(1,indexOfelement)"
[disabled]="shouldDisableIncrement(searched._value)"
>
<mat-icon>add</mat-icon>
</button>
</mat-form-field>
<button mat-flat-button style="background-color: #1d857b;color:white" (click)="getaddedmedcine(searched.id,indexOfelement,searched.amount)" > Add To Cart</button>
</mat-card>
This is part of my TypeScript file:
incrementValue(step: number = 1, index: number): void {
this._value += step;
this.searchedDataResult[index]._value = this._value;
}
I need help on how to reset the initial value to start with 1 for every index when incrementing and decrementing the counter. Any assistance would be greatly appreciated. Thank you!