title: How can one count iterations of Angular 9 ngFor without using index or .length?
body: <p>I have an Angular loop that has a conditional check in it. Thus, the usual answer of using the .length on the array, or using the i from index won't tell me how many items are <em>showing</em>. </p>
  
  <pre><code>&lt;form [formGroup]="paymentsForm"&gt;
  &lt;div formArrayName="arrVoucherLines"&gt;  
      &lt;div *ngFor="let line of paymentsForm.get('arrVoucherLines')['controls']; index as i"
       [formGroupName]="i"&gt;
  
       &lt;div *ngIf="dateCheckingConditionalFunctionPlaceholder()"&gt;
  
           &lt;mat-checkbox formControlName='FlagPayInvoice'&gt;&lt;/mat-checkbox&gt;
           Issued: {{line.value.DateTimeLocalInvoiceIssued |date:'MM/dd'}}
           Due: {{line.value.DateTimeLocalInvoiceDue |date:'MM/dd'}}
          ... variety of other voucer info
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Displaying the total amount of items is easy, but I want to also be able to display how many are shown and how many were skipped. If I could have a "variable++" in the loop that would be pretty easy.</p>
  
  <p>Desired result would be to end up with something that I could:</p>
  
  <pre><code>Total invoices {{blah.length}}
  Invoices Shown {{count}}
  Invoices not yet due: {{blah.length-count}}
  </code></pre>
  
  <p>The usage case is the user is selecting a cutoff date on the form, and only showing the bills due before that date.</p>