title: Radio Button within a table with Material Design
body: <p>I'm actually trying to insert a radio button group within a table component of material design and angular 6.</p>
  
  <p>So in the examples of Material design official website there is a table with checkboxes but what I want is to do the same with radio button for each element of the table.</p>
  
  <p>I tried to do it with a *ngFor directive but i can't access the ELEMENT_DATA array even if it's a global const.</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {MatTableDataSource} from '@angular/material';
  import {SelectionModel} from '@angular/cdk/collections';
  
  @Component({
    selector: 'table-selection-example',
    styleUrls: ['table-selection-example.css'],
    templateUrl: 'table-selection-example.html',
  })
  export class TableSelectionExample {
    displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
    dataSource = new MatTableDataSource&lt;PeriodicElement&gt;(ELEMENT_DATA);
    selection = new SelectionModel&lt;PeriodicElement&gt;(true, []);
  
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      const numRows = this.dataSource.data.length;
      return numSelected === numRows;
    }
  
    masterToggle() {
      this.isAllSelected() ?
          this.selection.clear() :
          this.dataSource.data.forEach(row =&gt; this.selection.select(row));
    }
  }
  
  export interface PeriodicElement {
    name: string;
    position: number;
    weight: number;
    symbol: string;
  }
  
  const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
    {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
    {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
    {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
    {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
    {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  ];
  </code></pre>
  
  
  
  <pre><code>    &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  
    &lt;!-- Checkbox Column --&gt;
    &lt;ng-container matColumnDef="select"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;
        &lt;mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() &amp;&amp; isAllSelected()"
                      [indeterminate]="selection.hasValue() &amp;&amp; !isAllSelected()"&gt;
        &lt;/mat-checkbox&gt;
      &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt;
        &lt;mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)"&gt;
        &lt;/mat-checkbox&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="position"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef="weight"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Weight &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.weight}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef="symbol"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Symbol &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.symbol}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"
        (click)="selection.toggle(row)"&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So with this code i want to remove the checkboxes and replace it with radio buttons.</p>
  
  <p>what i tried is to put :</p>
  
  <pre><code>&lt;mat-radio-group&gt;
     &lt;mat-radio-button *ngIf="let i of ELEMENT_DATA" value = i&gt;&lt;/mat-radio-button&gt;
  &lt;/mat-radio-button&gt;
  </code></pre>
  
  <p>and like I said before I can't access my Array ELEMENT_DATA. I also tried to change it with dataSource.length, but nothing do.</p>
  
  <p>thanks for helping.</p>