How to change the Table Header name in Angular Material Table?

Question

[![Change the table header to string][1]][1]

As I am fetching the data from the JSON Dynamically. [1]: https://i.stack.imgur.com/hIMYQ.png

I want to change the name of the table header, as the name is coming from the API and those are the JSON object and I am fetching the table data dynamically.

.html:

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" style="text-align: center; font-weight: 500;">
          <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
            <th mat-header-cell *matHeaderCellDef> {{column.toUpperCase()}} </th>
            <td class="table-data" mat-cell *matCellDef="let element; let i=index"> {{element[column]}} </td>
    
          </ng-container>

     <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    
          <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
            [class.example-expanded-row]="expandedElement === element"
            (click)="expandedElement = expandedElement === element ? null : element">
          </tr>
    
          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

     <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="7">No data matching the filter "{{input.value}}"</td>
          </tr>
    
        </table>

.ts file:

    export class DialogProductComponent implements OnInit {

      columnsToDisplay = ['id', 'product_name', 'active_status', 'list_price', 'sell_price', 'maximum_discount', 'current_discount'];

}