title: mat-checkbox checked, but not rendering the check mark
body: <p>I have a component that contains a <code>mat-list-item</code>, which, when clicked, will toggle a checkbox's state between checked, indeterminate, and unchecked (in that order). Each list item has a number value that adds to a total as well when checked, subtracts from the total when indeterminate (shown here as the property <code>mitigated</code>), and again has a value of zero when it isn't selected.</p>
  
  <p>I got the UI looking &amp; working correctly with the <code>click</code> event bound to the <code>mat-list-item</code>. When the list item is clicked, the checkbox appears checked. Clicked a second time, the styling is applied so it's got strike-through on the text &amp; the checkbox is in the <code>indeterminate</code> state. Clicked a third time, it resets to unchecked. The math is working correctly with this behavior as well.</p>
  
  <p>However, when I click on the <strong>checkbox itself</strong>, not the list item, the checkbox does not render as checked, even though my <code>console.log</code> statement shows true after it's clicked. It adds the numeric value of the list item each time it's clicked &amp; the UI doesn't reflect any changes. I can't figure out why this is happening.</p>
  
  <p>I could bind the event just to the checkbox, but I want the user to be able to select the entire list-item for ease of use.</p>
  
  <p>Component:</p>
  
  <pre><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  import { Risk } from './risk.model';
  import { MatCheckboxChange, MatCheckbox } from '@angular/material';
  
  @Component({
    selector: 'app-risk',
    templateUrl: './risk.component.html',
    styleUrls: ['./risk.component.css']
  })
  export class RiskComponent {
    @Input('risk') risk: Risk;
    @Output() riskSelected = new EventEmitter&lt;number&gt;();
    mitigated: boolean;
    countScore: boolean;
  
    constructor() { }
  
    onSelect(c: MatCheckbox) {
      this.mitigated = c.checked &amp;&amp; !this.mitigated;
      c.checked = ((c.checked &amp;&amp; this.mitigated) || !c.checked);
      console.log('Checked: ', c.checked); // logs true, not rendered in browser
      this.countScore = c.checked &amp;&amp; !this.mitigated;
  
      this.changeScore(c);
    }
  
    private changeScore(c: MatCheckbox): void {
      let changeValue: number;
  
      if (!this.mitigated) {
        changeValue = c.checked ? this.risk.score : 0;
      } else {
        changeValue = -this.risk.score;
      }
  
      this.riskSelected.emit(changeValue);
    }
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-list-item fxLayout="row"
                 fxLayoutAlign="space-between center"
                 class="risk-list-item"
                 [class.mitigated]="mitigated"
                 (click)="onSelect(c)"&gt;
  
    &lt;div fxLayoutAlign="start center" fxFlex&gt;
      &lt;p&gt;
        &lt;span matBadge="{{ risk.requiresApproval ? 'AR' : ''}}"
              matBadgeColor="accent" matBadgePosition="before" matBadgeOverlap="false"&gt;
          {{ risk.description }}
        &lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div fxLayout fxLayoutAlign="end center" fxFlex&gt;
      &lt;mat-chip-list disabled="true"&gt;
        &lt;mat-chip color="primary"&gt;{{ risk.score }}&lt;/mat-chip&gt;
      &lt;/mat-chip-list&gt;
  
      &lt;mat-checkbox #c color="primary" [indeterminate]="mitigated"&gt;
      &lt;/mat-checkbox&gt;
    &lt;/div&gt;
  &lt;/mat-list-item&gt;
  
  &lt;!-- MITIGATION NOTES --&gt;
  &lt;div *ngIf="mitigated"&gt;
    &lt;mat-form-field&gt;
      &lt;textarea matInput placeholder="Mitigation Note:"&gt;&lt;/textarea&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>