Adding items price

Dear,

There is never ending list of item description with item price. I want to update the total every time the new item price is added. Following is my html:

<div text-center><button ion-button small full color="secondary" center (click)="addItems()">Add Purchase Items</button></div>    
    <ion-label center>Items Added</ion-label>    
    <ion-item>Total Bill Value: Rs. {{getTotal()}}</ion-item>
    <ion-item *ngFor="let item of itemList | async" (click)="showOptions(item.$key, item.name, item.quantity, item.units, item.price)" #slidingItem>      
        <ion-col>{{item.name}}</ion-col>
        <ion-col>{{item.quantity}} </ion-col>
        <ion-col>{{item.units}} </ion-col>
        <ion-col>Rs. {{item.price}}</ion-col>      
    </ion-item>

Following is the ts:

getTotal() {
    this.itemPrice += this.itemPrice;
    return this.itemPrice;
}

I am getting result as NaN… i tried the ‘for’ method but there is error as it does not recognize length as property… Kindly help

No function called from a template (such as getTotal() is here) may ever modify state, because you have no idea how many times it will be called, or under what circumstances. You should declare a totalPrice property and update it appropriately (perhaps in addItems()), but it emphatically may not be modified in any function interpolated by the template (you shouldn’t even need to have a interpolated by the template, a property binding should be sufficient and more performant).

Thanks rapropos,

I am not clear on how adding totalPrice in addItems() can help. Following is my addItems():

addItems(){
    let prompt = this.alertCtrl.create({
      title: 'Purchase Items',
      message: 'Enter Item details for purchase',
      inputs: [
        {
          name: 'name',
          placeholder: 'Item Name'
        },
        {
          name: 'quantity',
          placeholder: 'Quantity',
          type: 'number'
        },
        {
          name: 'units',
          placeholder: 'Grams, KG, Inches etc',
             
        },
        {
          name: 'price',
          placeholder: 'Price Name',
          type: 'number'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked')
          }
        },
        {
          text: 'Save',
          handler: data =>{
            this.itemList.push({
              name: data.name,
              quantity: data.quantity,
              units: data.units,
              price: data.price
            })
          }
        }
      ]
    });
    prompt.present();
  }

The bit that pushes something onto itemList could add data.quantity * data.price to totalPrice.

You mean total: data.quantity * data.price and add totalPrice…Although i can look at it. My question is how to add multiple price input by user… For example, the user inputs $100 for one item and $25 for second, the total should be $125… I am not looking for multiplying quantity and price right now

Please provide access to a complete repository on GitHub that people can use to reproduce your situation and suggest improvements.

I have pushed to firebase… Any way I can use it from there to add the item price?