Rows are adding while Dynamic Columns are adding to the Mat-Table using Angular 8

Question

While adding the dynamic columns into the mat table, rows are adding along with columns. But dont want to add the rows into the table while adding the columns.

I have the list of items which needs to add/remove as columns as dynamically to the table. While clicking the item, that item is added as column into the table and at the same time one row is adding. dont want to add the row in to the table.

If 5 items are adding as columns 5 rows are added to the table.

you can check the issue https://stackblitz.com/edit/angular-pg9fie

Answer 1

It looks like you are adding a new row to the data source every time a column is added. From your code:

this.selectedOptions.forEach(element => {
  this.tableDataSource.push(element.name); // this is adding a row
});

Instead, you just want to add the column to the list of displayed columns. There are other problems with your code as well, so I'm just sharing an example of the functionality that I think you are looking for:

https://stackblitz.com/edit/angular-material-table-dynamic-columns?embed=1&file=app/app.html