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











Table Material Angular,Material Angular Radio Group,Material Angular Table with Radio Group Table Material Angular,Material Angular Radio Group,Material Angular Table with Radio Group Reviewed by interfacecreator on 6:03:00 PM Rating: 5

No comments:

Powered by Blogger.