Calculate sub total of specific item in angular

Question

How can I apply the sub total amount on specific item.

So far, I have these sample on stackblitz: When I add new item and change the quantity of that last item all items I added recently were updating as well. I would like to apply the update the "get subTotal() changeSubtotal()" to a specific item only.

Here' my Component.

//Component

items = this.cartService.getItems();
subTotal: any;

 //-----  total 
    get total(){
        return this.items.reduce((sum,x)=>  ({
            qtyTotal:1,
            variationCost:sum.variationCost+x.qtyTotal*x.variationCost
        }),
        {qtyTotal:1,variationCost:0}).variationCost;
    }

    //-----  subtotal
    // get subTotal(){
    //     return this.items.reduce((_sum,x)=>  ({
    //         qtyTotal:1,
    //         variationCost:x.qtyTotal*x.variationCost
    //     }),
    //     {qtyTotal:1,variationCost:0}).variationCost;
    // }

    changeSubtotal(index: number){
    console.log(index)
       return this.subTotal = this.items.reduce((sum, item) => sum += 
        (item.qtyTotal || 0) * (item.variationCost || 0) ,0)
     }

Here's my HTML

// HTML

<div *ngFor="let addedItem of items; let i = index ">
   <div>
     <input id="{{ addedItem.variationId }}"
     [(ngModel)]="addedItem.qtyTotal"
     [ngModelOptions]="{standalone: true}" min="1" type="number"  
     value="{{ addedItem.qtyTotal }}" 
     (click)="changeSubtotal(i)">
    </div>
    <div>{{ subTotal | currency }}</div>
</div>

<div>{{ total | currency }}</div>

Sample code here: stackblitz

question from:https://stackoverflow.com/questions/65902955/calculate-sub-total-of-specific-item-in-angular

Answer 1

I fixed it.

I referenced the element by using @ViewChildren decorator and created a method to target the specific item.

//HTML
<div *ngFor="let addedItem of items; let i = index " >
   <div>
     <input id="{{ addedItem.variationId }}"
     [(ngModel)]="addedItem.qtyTotal"
     [ngModelOptions]="{standalone: true}" min="1" type="number"  
     value="{{ addedItem.qtyTotal }}" 
     (change)="changeSubtotal($event.target.value, addedItem.variationCost,i)">
    </div>
    <div #subTotalWrap>{{ addedItem.variationCost | currency }}</div>
</div>

<div>{{ total | currency }}</div>

...

//Component
@ViewChildren('subTotalWrap') subTotalItems: QueryList<ElementRef>;

changeSubtotal(qty, amt, index) {
   const subTotal = amt * qty;
   this.subTotalItems.toArray()[index].nativeElement.innerHTML = subTotal
}

https://stackblitz.com/edit/angular-ivy-i8kpub?file=src/app/app.component.ts