Calculated sum correct in HTML but not saving in firebase?



I am able to get the sum in the HTML correctly with following codes:

<ion-item type="text" formControlName="billValue" [(ngModel)]="retailerItemModel" name="billValue" ngDefaultControl >Total Bill Value Rs. {{ totalValue(retailerItemModel) || 0 | number: '1.2-2' }}

I am using Firebase to save data with AngularFire service provider:

saveBill(billValue: any =[], ): firebase.Promise<any>{
    return this.afDatabase.list(`userProfile/${this.userId}/billList/`).push({

The problem is after saving the firebase data shows array:

sum problem

I want the sum of selected values to show not the array… Is there any way to do the calculation in HTML itself or controller for selected value… Following is the controller formula:

totalValue(retailerItemModel: any=[]){
    let total = 0;
    retailerItemModel.forEach((item) => {
      total += Number(item);
    return total;


I don’t know what’s going on with firebase, but don’t interpolate totalValue(), it’s wasteful. Instead call it only when one of its inputs has changed and store the result in a separate controller property that is then referenced from the template. Much more efficient.


Thanks Rapropos. But even if I refer to ionChange=“selectedItems()” and calculate total with ‘for each’ method… The result is the same(Obviously)… I am not understanding the logic to connect the sum of array elements within the selectedItems that can save as ‘billValue’


I solved it while using the same logic on Provider…


Can you get the code or description what is provider here… can you send me full code of your project please