title: Firing a function after a checkbox is selected in an Angular form
body: <p>I have a dynamic form with checkboxes in my Angular 6 app. The following code retrieves the data for my component and populates a reactive form:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
    this.accountsService.getApprovedInvoicesToBeEntered()
      .pipe(first())
      .subscribe(
        result =&gt; {
          this.approvedInvoices = result;
          this.controls = this.approvedInvoices.map(c =&gt; new FormControl(false));
          this.form = this.formBuilder.group({
            approvedInvoices: new FormArray(this.controls)
          });
        },
        () =&gt; { });
  }
  
  updateSubtotal() {
    this.selectedTotal  = this.form.value.approvedInvoices
      .map((v, i) =&gt; v ? this.approvedInvoices[i] : null)
      .filter(v =&gt; v !== null)
      .reduce((a, b) =&gt; +a + +b.total, 0);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>This is my html:</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;tbody formArrayName="approvedInvoices" *ngFor="let approvedInvoice of approvedInvoices; let i = index"&gt;
      &lt;tr&gt;
        &lt;td&gt;
           &lt;input type="checkbox" (click)="updateSubtotal()" [formControlName]="i" id="{{i}}"&gt;
        &lt;/td&gt;
      &lt;/td&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>This works really well, my problem though is that updateSubtotal doesn't take into account the currently clicked item.  If I have a form with invoices and I click the first one then selectedTotal = 0.  When I select a second invoice, the selectedTotal equals the total of the first invoice.</p>
  
  <p>How can I fire the updateSubtotal() function AFTER the checkbox is marked as selected?</p>