Radio Button within a table with CDK Table / Material Design

Question

I am actually trying to insert a radio button group within a table component of CDK Table /material design . See Expected Image /Result

https://stackblitz.com/angular/qxkmjjxrlrm?file=app%2Ftable-sticky-header-example.ts

Answer 1

You can simply add your radio group around your table, and add radio buttons inside your cells. Here's a StackBlitz example.

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

  <table mat-table [dataSource]="dataSource">

    <!-- Selected Column -->
    <ng-container matColumnDef="selected">
      <th mat-header-cell *matHeaderCellDef>
        Selected Element:<br /><b>{{ selectedElement?.name }}</b>
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-radio-button [value]="element">
        </mat-radio-button>
      </td>
    </ng-container>

    ...

  </table>

</mat-radio-button>