Mat Table using titles of header with spaces

Question

I am using Angular material with "mat-table" and I want use titles of header with spaces, for example: First Name, Last Name ... , But not work! Just data of "id" column appear coz there isn't spaces in it.

dashboard.component.ts:

displayedColumns: string[] = ['Id', 'First Name', 'Last Name', 'Email', 'Create Date'];

const clients: Client[] = [
        { id: 1, firstName: "Mohamad", lastName: "Hamid", email:"[email protected]", createDate: "25/5/2024" },
        { id: 2, firstName: "John", lastName: "Wisly", email:"[email protected]", createDate: "25/5/2024" },
        { id: 3, firstName: "Jack", lastName: "Sparo", email:"[email protected]", createDate: "25/5/2024" },
        { id: 4, firstName: "Jessica", lastName: "Henry", email:"[email protected]", createDate: "25/5/2024" }
      ];

dashboard.component.html:

      <ng-container [matColumnDef]="column">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</th>
        <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
      </ng-container>
    }

Result:

Answer 1

You need to format the column value as camel case for accessing the property value.

@for (column of displayedColumns; track column) {
  @let words = column.split(' ');
  @let firstWord = words[0].toLowerCase();
  @let prop = firstWord + words.slice(1).join('');

  <ng-container [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</th>
    <td mat-cell *matCellDef="let element">{{ element[prop] }}</td>
  </ng-container>
}

Demo @ StackBlitz