title: Angular Sum totals with reduce function
body: <p>Beginning <a href="https://stackoverflow.com/questions/51291554/angular-sum-dynamic-data-from-ngfor-loop-to-get-total-subtotal-and-vat-value">here</a>, I am attempting to sum a specific property for an array of objects by using the javascript reduce function within angular bindings.</p>
  
  <p>Component</p>
  
  <pre><code>totals: total[] = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;{{ totals.map(t =&gt; t.itemCount).reduce((a, b) =&gt; a + b, 0) }}&lt;/div&gt;
  </code></pre>
  
  <p>With the above, I'm getting the Error: "Bindings cannot contain assignments"</p>
  
  <p><a href="https://stackblitz.com/edit/angular-2yjfwz" rel="nofollow noreferrer">stackblitz mockup</a></p>
  
  <p>Thanks in advance</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have marked the answer provided by @quirimmo as correct but I also wanted to address @jo_va answer.</p>
  
  <p>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.</p>
  
  <p>My resolution was to pass along a service as an object to the component and place the method within that service for reference.</p>
  
  <p>Thanks for the help S.O.</p>