mat-radio-group in each row of mat-table

Issue

This Content is from Stack Overflow. Question asked by Eden Cohen

I want to create a table that displays the form in angular that the user can choose in each row one option, for that, I implement mat-table, and in each cell there is mat-radio-button
but I don’t know where to insert the so the user can choose from each row one option

rate-selector.component.html:

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="Rate">
        <th mat-header-cell *matHeaderCellDef> Rate </th>
        <td mat-cell *matCellDef="let element">
            {{element.rate}}
        </td>
    </ng-container>

    <ng-container matColumnDef="Basic">
        <th mat-header-cell *matHeaderCellDef> Basic </th>
        <td mat-cell *matCellDef="let element">
            <mat-radio-button value={{element.basic}}></mat-radio-button>
        </td>
    </ng-container>

    <ng-container matColumnDef="Enable">
        <th mat-header-cell *matHeaderCellDef> Enable </th>
        <td mat-cell *matCellDef="let element">
            <mat-radio-button value={{element.enable}}></mat-radio-button>
        </td>
    </ng-container>

    <ng-container matColumnDef="Disable">
        <th mat-header-cell *matHeaderCellDef> Disable </th>
        <td mat-cell *matCellDef="let element">
            <mat-radio-button value={{element.disable}}></mat-radio-button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns">
    </tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

enter image description here



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?