Table Material Angular,Material Angular Radio Group,Material Angular Table with Radio Group


 Material Angular Table with Radio Group

Do refer materiel table part1,part2, and part3, here discussed, how to use Mat Radio Group as table's cell <td> template.
Code Action @ StackBlitz

Step1: Add Mat Radio Group app.module.ts 

// import  MatRadioModuleimport {MatRadioModule} from '@angular/material/radio';

Step2: Add Mat Radio Group as Html Mat Table's Table Data <td> Template 

// Add Below MatRadio snipet in Mat Table's <td> Template <ng-container matColumnDef="langselection" ><th mat-header-cell *matHeaderCellDef mat-sort-header> Primary Language </th><td mat-cell *matCellDef="let element"> <mat-radio-group  [(ngModel)]="element.language"><mat-radio-button  *ngFor="let lang of mylanguages" [value]="lang">{{lang}}  </mat-radio-button></mat-radio-group></td><td mat-footer-cell *matFooterCellDef>  </td></ng-container>

Step3: Toway binding display in the same row 

<ng-container matColumnDef="language" ><th mat-header-cell *matHeaderCellDef mat-sort-header> Selected Language </th><td mat-cell *matCellDef="let element"> {{element.language}}  </td><td mat-footer-cell *matFooterCellDef></td></ng-container>

Step4: In Component 

// create an array of languages
export const languages: Array<string> = ['English','German'];
// declare below in Component.ts
public mylanguages = languages;

Step5: Run the Project and see the result

Post a Comment


  1. A thoughtful insight and ideas I will use on my website. Youve obviously spent some time on this. Congratulations! web design new york

  2. I am often to running a blog and i actually appreciate your content. The article has actually peaks my interest. I am going to bookmark your site and preserve checking for brand new information. new york web designs

  3. Would love to constantly get updated great web blog ! . branding san francisco

  4. I think you have observed some very interesting details , thankyou for the post. branding agency san francisco