title: Angular 2 / Material 2: Checkbox checked binding
body: <p>I have an Angular 2 (2.4.3) app using Material (2.0.0-beta.1) and I'm facing some problems with bindings on checkboxes. </p>
  
  <p>I want to have a checkbox that's conditionally checked according to a boolean value in my component. When clicked, I want to toggle the bool. </p>
  
  <p>So I did this:</p>
  
  <pre><code>private _showName: boolean = true;
  </code></pre>
  
  <p>and in the HTML:</p>
  
  <pre><code>&lt;md-checkbox (click)="toggleName()" [checked]="_showName"&gt;&lt;/md-checkbox&gt;
  </code></pre>
  
  <p>And <code>toggleName()</code> looks like this:</p>
  
  <pre><code>toggleName(): void { 
      this._showName = !this._showName;
      let ctrl = this._searchForm.get('name'); 
      ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
  }
  </code></pre>
  
  <p>Using this, when I click the checkbox:</p>
  
  <ul>
  <li>The bool <code>_showName</code> gets toggled to false</li>
  <li>But the checkbox stays checked</li>
  </ul>
  
  <p>The second time I click the checkbox it unchecks itself and toggles the bool again, hence leaving the logic reversed. </p>
  
  <p>If I set <code>[checked]</code> using a string like this:</p>
  
  <pre><code>&lt;md-checkbox (click)="toggleName()" [checked]="true"&gt;&lt;/md-checkbox&gt;
  </code></pre>
  
  <p>The checkbox unchecks itself on the first click and the bool is toggled, but now there's no way for me to bind it to the bool. So if I change the bool from my component it won't reflect to the checkbox. </p>
  
  <p>I am probably doing something wrong, but looking at "Examples" in the <a href="https://material.angular.io/components/component/checkbox" rel="nofollow noreferrer">official documentation</a> I can't figure out where I am going wrong. </p>