Linked Questions

Popular Questions

mat-radio-group not showing currently checked value correctly

Asked by At

With the below code I am seeing the following behavior:

  1. initial rendering works correctly, with the option reflected in localOptions.theme being checked
  2. selecting a different option correctly renders the checked button and fires the change event

  3. selecting a third option fires the event but does NOT update the button as checked

  4. selecting a fourth option fires the event correctly but renders the button from step 3 as checked

  5. from this point on the checked button is one behind the actual selected button. events fire correctly.

What am I missing?

      <mat-radio-group [(ngModel)]="localOptions.theme" (change)="changeTheme()">
      <div class="row">
        <div class="col-4">
          <mat-radio-button value="amber" name="amber">Amber</mat-radio-button>
        </div>
        <div class="col-4">
          <mat-radio-button value="grey" name="grey">Grey</mat-radio-button>
        </div>
        <div class="col-4">
          <mat-radio-button value="bluegrey" name="bluegrey">Blue Grey</mat-radio-button>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <mat-radio-button value="blue" name="blue">Blue</mat-radio-button>
        </div>
        <div class="col-4">
          <mat-radio-button value="green" name="green">Green</mat-radio-button>
        </div>
        <div class="col-4">
          <mat-radio-button value="teal" name="teal">Teal</mat-radio-button>
        </div>
      </div>
      </mat-radio-group>

Related Questions