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











Post a Comment

5 Comments

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

    ReplyDelete
  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

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

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

    ReplyDelete