How to add a column into Mat Table - Angular?

0
votes

I'm trying to add column in to mat table but column get added 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() {}
}

I want to add a column into the mat table, I wrote some basic logic but whenever I added a column, column name get multiple names Here is it my stackBlitz link --> https://stackblitz.com/edit/add-extra-column-mat-tabe?file=app%2Ftable-basic-example.ts

2
angulartypescriptangular-material

2 Answers

1
votes

Try to change line 27 from this:

<mat-header-cell *cdkHeaderCellDef>{{ displayedColumns }}</mat-header-cell>

To:

<mat-header-cell *cdkHeaderCellDef>{{ column }}</mat-header-cell>

0
votes

The reason you are seeing all values show up is because you are displaying all the values in displayedColumns:

<mat-header-cell *cdkHeaderCellDef>{{displayedColumns}}</mat-header-cell>

In your ng-container, you are looping through the data with ngFor:

<ng-container *ngFor="let column of displayedColumns" [cdkColumnDef]="column">

So you need to change your mat-header-cell to take each individual item, in this case 'column'. Your mat-header-cell should look like this:

<mat-header-cell *cdkHeaderCellDef>{{column}}</mat-header-cell>

Now we are looping through each individual item, instead of displaying the entire array each time.