Angular How to change the label of a mat table at runtime-CodePudding

I have an angular mat table with pagination like in their official documentation: https://material.angular.io/components/table/examples . How could I change at runtime the value of a label? The table is created but I want to change a value in the table's header without recreating the table. Is there any possibility? For example, in the table below I want to change the value for the header and instead to have "Symbol" to have "something" without recreating the whole tabel. So just a change of a label.

  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]"
                 showFirstLastButtons 
                 aria-label="Select page of periodic elements">
  </mat-paginator>
</div>

CodePudding user response：

just use a variable in th

<th mat-header-cell *matHeaderCellDef>{{myVariable}}</th>

In .ts

myVariable="Symbol"  //define your variable
//and in any place
this.myVariable="Name Changed"

NOTE: In general, if you has no "especial mask" about your columns, you can defined an array of "headers" in the way

headers=[{title:"position",column:"position"},
         {title:"Name",column:"name"},
         {title:"Weight ",column:"eight "}
         ...
        ]

And loop over this array in your .html

<ng-container *ngFor="let head of headers"; [matColumnDef]="head.column">
  <th mat-header-cell *matHeaderCellDef> {{head.title}}</th>
  <td mat-cell *matCellDef="let element"> {{element[head.column]}} </td>
</ng-container>