title: Mat-checkbox checked not changing checkbox state
body: <p>I'm implementing a language switch component which display checkboxes, one for each language of the app (translations with <code>@ngx-translate</code>).</p>
  
  <p>When clicking one of the checkbox, app language is correctly switched but the clicked mat-checkbox is still unchecked.</p>
  
  <p>Template :</p>
  
  <pre><code>&lt;mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')"&gt;English&lt;/mat-checkbox&gt;
  &lt;mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')"&gt;French&lt;/mat-checkbox&gt;
  &lt;mat-checkbox [checked]="selectedLanguage == 'de'" (click)="switchLanguage('de')"&gt;German&lt;/mat-checkbox&gt;
  </code></pre>
  
  <p>Component :</p>
  
  <pre><code>export class CheckboxOverviewExample {
    public selectedLanguage: string;
  
    constructor(){
      this.selectedLanguage = 'fr';
    }
  
    public switchLanguage(lang: string) {
      this.selectedLanguage = lang;
      // this.translateService.use(lang); // changing ngx-translate language
      console.log('Switched to ' + lang);
    }
  }
  </code></pre>
  
  <p>The <code>[checked]</code> binding is working when you route to the component. The <code>mat-checkbox</code> for french is indeed checked when landing to the component (default value). Now when I click on german or english, the language does switch, the french checkbox does correctly uncheck, however the clicked checkbox does not check.</p>
  
  <p>I'm missing something, might be a small detail, but I do not understand why the german / english does not check while the french does correctly uncheck.</p>
  
  <p>Have a look at <a href="https://angular-hjeezr-wcxytp.stackblitz.io" rel="nofollow noreferrer">this simple stackblitz code</a> to reproduce my case.</p>