CODEWITHSUNDEEP
angulartypescriptangular-materialradio-button
Jack
Jack

Reputation: 1

Angular Material mat-radio-button does not change selection

I use mat-radio-button in material table and it is displayed properly at the beginning of each row.

However, when I click another option, the previous selections still remains selected.

So, how can I unselect them after selecting another one?

<ng-container matColumnDef="radio">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <mat-radio-group>
        <mat-radio-button (click)="radioSelected(row)" [value]="row">
        </mat-radio-button>
      </mat-radio-group>
    </td>
</ng-container>

Upvotes: 1

Views: 3229

Answers (2)

dixavier27
dixavier27

Reputation: 66

You haven't set any model yet, so they're using a generic model that matches with any radio, so first of all you need to set one, using ngModel:

<mat-radio-group [(ngModel)]="radio">

And set eg a radio proprety in TS file:

radio: string;

Upvotes: 1

Yoan Desforges
Yoan Desforges

Reputation: 113

Right now you are creating a new radio group for each loop, what you want is having a single group and only create the buttons for each loop turn.

So try taking your group above your container so that it wraps up every radio buttons instead of having one radio group per button.

Radio groups is what links buttons together basically.

Upvotes: 1

Related Questions