I am attempting to insert a new column into a mat table, but the column is showing up with multiple names.
HTML FILE
<div class="main-content">
<form class="example-form">
<mat-form-field class="example-full-width">
<input
matInput
[(ngModel)]="columnName"
name="columnName"
placeholder="Add Column Here"
/>
</mat-form-field>
<button
mat-button
mat-raised-button
color="primary"
(click)="addColumns()"
>
Add
</button>
<mat-table [dataSource]="columnDataSource">
<ng-container
*ngFor="let column of displayedColumns"
[cdkColumnDef]="column"
>
<mat-header-cell *cdkHeaderCellDef>{{
displayedColumns
}}</mat-header-cell>
<mat-cell *cdkCellDef="let row">{{
displayedColumns
}}</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"
></mat-header-row>
<!-- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> -->
</mat-table>
</form>
</div>TS FILE
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
displayedColumns = [];
columnDataSource: any = [];
columnName: any;
constructor() {}
addColumns() {
this.displayedColumns.push(this.columnName);
this.columnDataSource = new MatTableDataSource<any>(
this.displayedColumns
);
console.log(this.displayedColumns);
}
ngOnInit() {}
}
When trying to add a column to the mat table, I have encountered an issue where the column name is being duplicated. You can view my code on StackBlitz here: https://stackblitz.com/edit/add-extra-column-mat-tabe?file=app%2Ftable-basic-example.ts