title: Checkbox with three states
body: <p>I'm trying to do a checkbox with three states. For this I made a method that when clicking it navigates between states. The problem is that this method is only called after the HTML change. So it goes into my method after changing the state of the HTML making the navigation of the checkbox is wrong. </p>
  
  <p>How could I make it call my method before changing it in HTML?</p>
  
  <p>Navigation between states:</p>
  
  <p><a href="https://imgur.com/gallery/hDgiXGc" rel="nofollow noreferrer">https://imgur.com/gallery/hDgiXGc</a></p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div class="switch switch-group" [ngClass]="getClasses()"  appAttribute [states]="states" [attr.disabled]="(disabled == 'disabled') ? 'disabled' : null" &gt;
    &lt;input #inputSwitch type="checkbox" appAttribute [states]="states" class="switch-checkbox" (click)="changeState()"&gt;
    &lt;label class="switch-label"&gt;Example&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My <code>component.ts</code>:</strong></p>
  
  <pre><code>  @ViewChild('inputSwitch') inputSwitch: ElementRef;
  
    changeState() {
      // Work
      if(this.states == 2) {    
        this.inputSwitch.nativeElement.checked == true ? false : true;
        console.log(this.inputSwitch.nativeElement.checked);      
      } 
      // Not work
      else if (this.states == 3) {
        switch(this.inputSwitch.nativeElement.checked)
        {
          case false:
            if(!this.inputSwitch.nativeElement.indeterminate) {
              this.inputSwitch.nativeElement.checked = true;
              break;
            } 
            else {
              this.inputSwitch.nativeElement.checked = false;            
              break;
            }
          case true:
            this.inputSwitch.nativeElement.indeterminate = true;
            break;
        }
      }
    }
  </code></pre>