title: Toggle Value in Angular Material CheckBox
body: <p>I have a Template Driven Form in which i am putting a checkbox that can toggle its value.</p>
  
  <p>Component </p>
  
  <pre><code>public toggles = [
      { value: 'toggled', display: 'Toggled' },
      { value: 'untoggled', display: 'UnToggled' },
  ];
  
  &lt;div&gt;
      &lt;input type="hidden" name="toggle" [(ngModel)]="user.toggle"&gt;
      &lt;div&gt;
          &lt;label&gt;
              &lt;input type="checkbox"
                  [checked]="user.toggle === toggles[0].value" 
                  (change)="$event.target.checked? (user.toggle =  toggles[0].value) : (user.toggle = toggles[1].value)"&gt;
              {{ toggles[0].display }}
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The following works great, but when i am switching to Angular Material it just fails to works .</p>
  
  <p>The material Template code</p>
  
  <pre><code>&lt;input type="hidden" name="toggle" [(ngModel)]="user.toggle"&gt;
  &lt;md-checkbox [checked]="user.toggle === toggles[0].value"
                 (change)="$event.target.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)"&gt;
      {{toggles[0].display}}&lt;/md-checkbox&gt;
  </code></pre>
  
  <p>I am getting the following Error in console, it says cannot read the property of undefined  console,  </p>
  
  <pre><code>TypeError: Cannot read property 'checked' of undefined
          at Object.eval [as handleEvent] (TemplateDrivenComponent.html:64)
  </code></pre>
  
  <p>I know the point where the error is occurring <strong>$event.target.checked</strong> angular cannot read this checked event on md-checkbox , how to get around this any pointers will be great </p>
  
  <p>thanks</p>