//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
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;
5 Comments
Code android example
ReplyDeleteA thoughtful insight and ideas I will use on my website. Youve obviously spent some time on this. Congratulations! web design new york
ReplyDeleteI 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
ReplyDeleteWould love to constantly get updated great web blog ! . branding san francisco
ReplyDeleteI think you have observed some very interesting details , thankyou for the post. branding agency san francisco
ReplyDelete