How to handle select drop-down dynamically using mat-table in angular8?

0
votes

I have to add columns dynamically to the mat-table, now I want to add some column rows are input fields, some are select drop-down and one is the output of all the columns. And these column names are dynamically.

How to handle those conditions in Mat-Table ?

Link: https://stackblitz.com/edit/angular-pg9fie

1
angularangular-materialangular6mat-table

1 Answers

1
votes

You can change the displayedColumns of *matRowDef="let row; columns: displayedColumns;"> dynamically and the table will re-render.

Just add a formControl to your mat-selection-list make your displayedColumns the value of it.

<mat-selection-list [formControl]="columnFormControl">
  <mat-list-option *ngFor="let column of ruleGroupColumns" [value]="column"></mat-list-option>
</mat-selection-list>

ruleGroupColumns: string[] = [
  'MERGE',
  'FACILITY',
  'COMPANY'
];

columnFormControl = new FormControl(this.ruleGroupColumns);

get displayColumns() {
  return this.columnFormControl.value;
}