title: How can I get the total value to be displayed in the template?
body: <p>I am trying to display a subtotal for each group of items in an array. I am able to display the list and to compute the running total in the component, however, the value is not displayed. </p>
  
  <p>I used the trackBy to initiate the computation (maybe there's a better way). I try using ngDoCheck and ngAfterContentChecked to update the view. The value to be displayed is computed but I'm not able to have it reflected in the template.</p>
  
  <p>Here's a sample of the code.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let invoice of sortedList"&gt;
      &lt;span&gt;{{invoice.key}}&lt;/span&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let item of invoice.value; trackBy: sumAmounts;"&gt;
              &lt;span class="row"&gt;{{item.DATE | date: "d/M/y"}}&lt;/span&gt;
              &lt;span class="row"&gt;{{item.INVOICE}}&lt;/span&gt;
              &lt;span class="row"&gt;{{item.AMOUNT | currency: 'USD':'symbol-narrow'}}&lt;/span&gt;
              &lt;span class="row"&gt;{{item.TAX}}&lt;/span&gt;
              &lt;span class="row"&gt;{{item.DU_DATE | date: "d/M/y"}}&lt;/span&gt;
              &lt;span class="row"&gt;;{{item.DAYS}}&lt;/span&gt;
         &lt;/li&gt;
         &lt;div class="line"&lt;/div&gt;
         &lt;div&gt;
            &lt;span&gt;Totals:&lt;/span&gt;
            &lt;span&gt;{{runningTot | currency: 'USD':'symbol-narrow'}}&lt;/span&gt;
         &lt;/div&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>`
  In the component</p>
  
  <pre><code>sumAmounts(index, rec) {
      if (rec.CODE != this.cusId) {
          this.runningTot = rec.AMOUNT;
          this.cusId = rec.CODE;
          console.log('initialized value: ', this.runningTot);
          this.summ = true;  // not relevant
          this.counter++;   // used to trigger ngDoCheck
      }
      else {
          this.runningTot = this.runningTot + rec.AMOUNT;
          console.log('Addition ', this.runningTot);
      }
  }
  </code></pre>
  
  <p>I want the runningTot to be displayed in the template whenever a new customer id is detected. The value in the template remains at 0, even though the the variable 'runningTot' has a value. </p>
  
  <p>DoCheck function is shown below:</p>
  
  <pre><code>  ngDoCheck() {
          if (this.counter != this.prv_Counter) {
              this.prv_counter = this.counter;
          }
              console.log('do check');
      }
  </code></pre>