How to add multiple values in a single column in Angular Material?

Issue

Currently each column contains a single value from a single property of JSON. I want to concatenate several of these property values in a single column in an Angular Material Table. How should I approach this?

Solution

You need to create a custom field called name in the TS file , where name is the combination of firstName and lastName.

Then specify {{element.firstName}} {{element.lastName}} in the HTML file.

Example:

In TS file:

displayedColumns: string[] = ['name'];

In HTML file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{element.firstName}}{{element.lastName}}</td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  
 </table>

Answered By - Joby Wilson Mathews