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