How to change header display text in Angular material table?

Just create a definition with the necessary data, and loop these. I created a stackblitz for you: https://stackblitz.com/edit/angular-ykrghm

Here are the important parts:

  <ng-container *ngFor="let def of tableDef">
<ng-container [matColumnDef]="def.key">
  <th mat-header-cell *matHeaderCellDef> {{def.header}} </th>
  <td [ngClass]="def.className" mat-cell *matCellDef="let element"> {{element[def.key]}} </td>
</ng-container>

--

  tableDef: Array<any> = [
    {
      key: 'position',
      header: 'Position',
      className: 'something'
    },    {
      key: 'name',
      header: 'Element Name',
      className: 'anElement'
    },    {
      key: 'weight',
      header: 'Weight',
      className: 'number'
    },    {
      key: 'symbol',
      header: 'A long text to display in header',
      className: 'something'
    },
  ]

I solved the same problem as

<table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="Range" matSortDirection="asc" matSortDisableClear>
    <ng-container *ngFor="let dispCol of displayedColumns; let colIndex = index" matColumnDef="{{dispCol.key}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{dispCol.header}}</th>
        <td mat-cell *matCellDef="let element" class="mat-column-vinCode">{{element[dispCol.key]}}</td>
    </ng-container>


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

And in component

export class RawSignalsContainerComponent implements OnInit{
constructor() { }

@Input() dataSource: Array<SignalCount>;
displayedColumns: Array<any>;
displayedColumnsKeys: string[];

ngOnInit() {
  displayedColumns= [
      {
        key: 'range',
        header: 'Range'
      },
      {
        key: 'lowRange',
        header: 'Low Range'
      },
      {
        key: 'highRange',
        header: 'High Range'
      },
      {
        key: 'populationSize',
        header: 'Population Size'
      },
      {
        key: 'populationPerc',
        header: '% of Population'
      }
    ];
  this.displayedColumnsKeys = this.displayedColumns.map(col => col.key);
}

Here, dataSource passed as input to the component is the array of objects with all keys of displayedColumns. i.e.,

export interface SignalCount{
range:string;
lowRange:number;
highRange:number;
populationSize:number;
populationPerc:number;
}

As you can see in the first example of the link you posted, you can set the displayed header name easily in the template (here the displayed header name for the column position will be No.):

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

In this case, you have to add one cell renderer method to check the rendered string length in your component, and inside the method, you can do whatever you want. Or you can ellipsis text by CSS property "text-overflow: ellipsis ... ETC"

You can add one tooltip on hover of the cell if you want to display original value.

//HTML

<ng-container matColumnDef="symbol">
  <th mat-header-cell *matHeaderCellDef> Symbol </th>
   // Like checkStringLength() method
  <td mat-cell *matCellDef="let element"> {{checkStringLength(element.symbol)}} </td>
</ng-container>

// Method

 checkStringLength(value:string){
   // Your logic 
   if(value.length < 30){
       Return value
     }else{
       // Here you can write your logic
       Return "Custom Value"
    }
}