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

//table-material-angular-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