Angular Sum totals with reduce function

Question

Beginning here, I am attempting to sum a specific property for an array of objects by using the javascript reduce function within angular bindings.

Component

totals: total[] = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];

HTML

<div>{{ totals.map(t => t.itemCount).reduce((a, b) => a + b, 0) }}</div>

With the above, I'm getting the Error: "Bindings cannot contain assignments"

stackblitz mockup

Thanks in advance

EDIT

I have marked the answer provided by @quirimmo as correct but I also wanted to address @jo_va answer.

I felt providing a method for angular inside my component is the right approach @quirimmo, however in my case, the component was JIT compiled on client request and at this time, I'm still uncertain as how to add that method dynamically during that component construction. This lead me to the Expression approach inside my HTML and knowingly avoiding @jo_va's answer of best practice.

My resolution was to pass along a service as an object to the component and place the method within that service for reference.

Thanks for the help S.O.

quirimmo · Accepted Answer · 2019-02-04 20:54:12Z

11

Define a function inside your component which returns the reduced value and inside the binding call that function of the component:

const totals = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];

console.log(totals.reduce((acc, val) => acc += val.itemCount, 0));

answered Feb 4, 2019 at 20:54

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

Comments

jo_va · Accepted Answer · 2019-02-04 21:01:44Z

2

Your reduce function works well. However it's a bad practice to use expressions in angular bindings.

Move your logic to your component and call a method or getter.

answered Feb 4, 2019 at 21:01

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

Comments

Ales · Accepted Answer · 2019-02-04 20:57:48Z

0

Map and reduce return a new array. This is where your error comes from.

You can use a getter like this https://stackblitz.com/edit/angular-whrfxp. Template shouldn't contain calculations.

answered Feb 4, 2019 at 20:57

Ales

3294 silver badges14 bronze badges

Comments

Edor Linus · Accepted Answer · 2020-04-16 17:55:58Z

0

totals.reduce((a, b) => a += (b. itemCount), 0) works

answered Apr 16, 2020 at 17:55

Edor Linus

1,18610 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular Sum totals with reduce function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related