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

Answer 2

You should use (change) instead of (click). Your template should be changed to this:

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

... and your function will look like this:

public switchLanguage(event: MatCheckboxChange, lang: string) {
    if(event.checked && this.selectedLanguage!== lang){
        this.selectedLanguage = lang;
        // this.translateService.use(lang); // changing ngx-translate language
        console.log('Switched to ' + lang);
    }
}

Remember to import MatCheckboxChange

import { MatCheckboxChange} from '@angular/material';`

Link to Demo.

---

You should use radio buttons for this behavior. Checkbox is not the correct way to go when you only have to allow a single option selection.

<mat-radio-group [value]="selectedLanguage">
  <mat-radio-button value="en" (click)="switchLanguage('en')">English</mat-radio-button>
  <mat-radio-button value="fr" (click)="switchLanguage('fr')">French</mat-radio-button>
  <mat-radio-button value="de" (click)="switchLanguage('de')">German</mat-radio-button>
</mat-radio-group>

Here is a StackBlitz Demo.