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

No comments

Post Top Ad

Post Bottom Ad