angular 7 html variable initialization

Question

I'm sure this is a simple solution but really couldn't find anything online or I kept getting sent down the wrong rabbit holes...

I just want to do a simple loop and add the items to a variable for display purpose only..

<div *ngFor="let item of items">
   <div> {{ item.cost }} </div>
<div>

then outside the loop initialize a variable and within the loop and increment it

set totalCost=0
<div *ngFor="let item of items">
   <div> {{ item.cost }} </div>
   set totalCost = totalCost + item.cost
<div>

You can do the calculations/assignment in component. Not in the HTML — Sachin Gupta
– Sachin Gupta, Commented Feb 27, 2019 at 14:03
If you want to do it in the view can do <div (click)="totalcost = totalcost + item.cost"> No need to set it to 0 first. — Swoox
– Swoox, Commented Feb 27, 2019 at 14:07

Jasmonate · Accepted Answer · 2019-02-27 14:06:28Z

1

Do it in the component, NOT the view.

A one-liner:

totalCost = items.reduce((result, item) => result + item.cost, 0);

answered Feb 27, 2019 at 14:06

Jasmonate

7521 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nice: simple test [1,2,3,4].reduce((result, item) => result + item, 0); => 10 :)

Thriller · Accepted Answer · 2019-02-27 14:08:46Z

0

You shouldn't do this in your HTML file, but rather do something like following

<div *ngFor="let item of items">
   <div> {{ item.cost }} </div>
<div>
   <div> {{getTotalCost()}} </div>

and in the .ts file of your component write the function

getTotalCost(){
// assuming you have a list of objects
let total = 0;
this.items.foreach(item=>{
total+= item.cost;
});
return total;
}

answered Feb 27, 2019 at 14:08

Thriller

5054 silver badges11 bronze badges