title: Set indeterminate on Angular checkbox
body: <p>I'm trying to programatically set the value of Angular checkboxes to either, <code>false</code> <code>true</code> or <code>indeterminate</code>. I understand that I cannot set the checkbox to the value <code>indeterminate</code> however we do have access to <code>[indeterminate]</code> on the input. Is it possible to set all three states via <code>ngModel</code> somehow? </p>
  
  <p>I have the following code which kinda works, however I am getting a <code>ExpressionChangedAfterItHasBeenCheckedError</code> error. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div *ngFor="let label of ClientLabels | async"&gt;
    &lt;label for="{{label.objectId}}"&gt;{{label.labelName}}&lt;/label&gt;
    &lt;input id="{{label.objectId}}" type="checkbox" name="group" [indeterminate]="checkedLabels()"
        [checked]="checkedLabels(label)" (change)="toggleSelectedLabels(label)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>checkedLabels(label): boolean {
      const index = this.selectedLabels.indexOf(label.objectId);
      this. indeterminateState = false;
      if (!this.selectedClients.length) {
        return false;
      }
      if (this.countInArray(this.selectedLabels, label.objectId) === this.selectedClients.length) {
        return true;
      }
      if (index &gt;= 0) {
        this. indeterminateState = true;
      }
    }
  
  countInArray(array, value) {
    return array.reduce((n, x) =&gt; n + (x === value), 0);
  }
  </code></pre>
  
  <p>Here the use case is similar to that of labels in Gmail, except clients are used in the place of an email. If all of the emails have the same label then they show as checked, however if not all of them share the label then it will show an indeterminate which can be cycled through the three states (true, false, indeterminate).</p>
  
  <p>Q1. How can I cycle through these three state in the same way as you can with gmail?</p>
  
  <p>Q2. Why am I getting the <code>ExpressionChangedAfterItHasBeenCheckedError</code> with the current setup? </p>
  
  <p>Here is a Stackblitz of current progress <a href="https://stackblitz.com/edit/angular-3bbutx" rel="noreferrer">https://stackblitz.com/edit/angular-3bbutx</a></p>
  
  <p><a href="https://i.stack.imgur.com/42tEZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/42tEZ.png" alt="Example of Gmail Tri-State checkbox"></a></p>