Mat-checkbox checked not changing checkbox state

Question

I'm implementing a language switch component which display checkboxes, one for each language of the app (translations with @ngx-translate).

When clicking one of the checkbox, app language is correctly switched but the clicked mat-checkbox is still unchecked.

Template :

<mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'de'" (click)="switchLanguage('de')">German</mat-checkbox>

Component :

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);
  }
}

The [checked] binding is working when you route to the component. The mat-checkbox 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.

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.

Have a look at this simple stackblitz code to reproduce my case.

Answer 1

so I have an answer for you. don't need to use a radio button as your designer hate it just use

<mat-checkbox [checked]="selectedLanguage === 'en'" (change)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage === 'fr'" (change)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage ==='de'" (change)="switchLanguage('de')">German</mat-checkbox>

check for type and value too using selectedLanguage === 'en'

also, use (change)="switchLanguage('de') instead of click

working here or check this