Adding items price



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.quantity, item.units, item.price)" #slidingItem>      
        <ion-col>{{item.quantity}} </ion-col>
        <ion-col>{{item.units}} </ion-col>
        <ion-col>Rs. {{item.price}}</ion-col>      

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():

    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 =>{
              quantity: data.quantity,
              units: data.units,
              price: data.price


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?