title: How to calculate running total from an array object in Javascript/Typescript and display output at every instance using HTML?
body: <p>I am working on a MEAN stack project and have an array that looks like this:</p>
  
  <pre><code>savings: any = [300, 450, 350, 500]
  </code></pre>
  
  <p>I also have a variable called savings_bf, which is savings brought forward retrieved from a DB with the value below.</p>
  
  <pre><code>savings_bf = 15000 
  </code></pre>
  
  <p>I would like to write some code with typescript to get the running total, factor in the savings_bf into the calculation,and display the output with HTML.</p>
  
  <p>As i have stated, this is for a MEAN stack application using Typescript 3.5.3. The output works as expected on the console, but the problem is replicating the output on the front-end.</p>
  
  <p>The code i have so far is:</p>
  
  <pre class="lang-js prettyprint-override"><code>this._savings_total = +this.savings.reduce((result, a) =&gt; {
              var savings_amount = a.savings_amount;
              return result + savings_amount;
            }, this.savings_bf);
  </code></pre>
  
  <p>,and displaying the output in html as;</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;{{_savings_amount}}&lt;/p&gt;
  </code></pre>
  
  <p>The expected HTML output should be:</p>
  
  <pre><code>15300,15750,16100,16600,
  but the actual output is the final value 16600
  </code></pre>