Angular material mat-button-toggle-group default value not set when using strings

Question

<div class="navigation">
<mat-button-toggle-group class="button-toggle" 
[(ngModel)]="langSelected"
(change)="onToggleGroupChange($event)" [value]="langSelected">
  <mat-button-toggle value="en">{{ 'header.english'| translate }}</mat-button-toggle>
  <mat-button-toggle value="sv">{{ 'header.svenska'| translate }}</mat-button-toggle>
</mat-button-toggle-group>
</div>

[value]="sv" is not working properly or not at all. Somehow when using [value] ="langSelected" causes strange problem, so that when changing the language three times, the button group is not working any more, onToggleGroupChange is not called at all after three clicks. langSelected is initialized on onInit to sv. So the main problem is how to set default value for mat-button-toggle-group when using strings instead of numbers?

Answer 1

try removing the [value]="langSelected" use the [(ngModel)] only instead and use (ngModelChange) instead of (change)