Dynamic Angular Material Table with Dynamic Displayed Columns and Attaching extra static Column for Action

Question

HTML:
As You can see, Below I have written the code for Material Table Structure, and my question is about- adding one static column (i.e. Actions) to this dynamic material table.

<div class="row">
    <div class="col-md-12">
      <mat-form-field appearance="standard">
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
      </mat-form-field>
      <div class="example-container mat-elevation-z0" style="width: 100%;">
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%;" matSort>
          <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i= index">
            <th mat-header-cell *matHeaderCellDef>{{column}}</th>
            <td mat-cell *matCellDef="let element"> {{element[column]}}</td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
          </tr>
        </table>
        <mat-paginator #firstPaginator [pageSize]="6" [pageSizeOptions]="[5, 10, 25, 50, 75, 100]"
          aria-label="Select page of users" showFirstLastButtons=""></mat-paginator>
      </div>
    </div>
  </div>

TypeScript: As you can see below I have declare the variable in the typescript file one for displaying the column(i.e. getTableStruture) and other is for displaying data(i.e. getTableData).

getTablestructure(tableName) {
    this.commonservice.Get('tableStructure', tableName).subscribe((response: any) => {
      if (response) {
        this.tableColumns = response[0].data[0];
        console.log('Table Columns: ', this.tableColumns);
        this.gettableDropDownValues();
        var displayedColumnsTemp = [];
        this.tableColumns.forEach(function (column) {
          displayedColumnsTemp.push(column.columnname.toString());
        });
        console.log('displayed Columns temp: ', displayedColumnsTemp)
        this.displayedColumns = displayedColumnsTemp;
        console.log('Displayed Columns: ', this.displayedColumns);
      }
    })
  }

 

 getTableData(tableName) {
    this.commonservice.Get('tableData', tableName).subscribe((response: any) => {
      if (response) {
        this.tableData = response[0].data[0];
        console.log('Table Data', this.tableData);
        this.totalLength = response[0].length;
        this.selectedObject = this.tableData[0];
        this.dataSource = new MatTableDataSource(this.tableData);
        console.log('Data Source', this.dataSource);
      }
    })
  }

Answer 1

In *.component.ts change:

this.displayedColumns = displayedColumnsTemp;

to:

this.displayedColumns = [...displayedColumnsTemp, 'Actions'];

In *.component.html change:

<td mat-cell *matCellDef="let element"> {{element[column]}}</td>

to

<td mat-cell *matCellDef="let element">
  <ng-container *ngIf="column !== 'Actions'">
    {{ element[column] }}
  </ng-container>

  <ng-container *ngIf="column === 'Actions'">
    {{ /* code here for actions */ }}
  </ng-container>
</td>