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

Question

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

blid · Accepted Answer · 2020-02-09 12:21:44Z

1

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;
}

answered Feb 9, 2020 at 12:21

blid

1,20116 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related