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 ponent is the right approach @quirimmo, however in my case, the ponent was JIT piled on client request and at this time, I'm still uncertain as how to add that method dynamically during that ponent 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 ponent and place the method within that service for reference.

Thanks for the help S.O.

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 ponent is the right approach @quirimmo, however in my case, the ponent was JIT piled on client request and at this time, I'm still uncertain as how to add that method dynamically during that ponent 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 ponent and place the method within that service for reference.

Thanks for the help S.O.

• javascript
• html
• angular
• typescript

4 Answers 4

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

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

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

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

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

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

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

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