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?
1 Answer
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 Jan 15, 2021 at 0:01
Joby Wilson Mathews
11.2k6 gold badges59 silver badges57 bronze badges
3 Comments
12johnny
how do you combine the properties into a custom field?
Joby Wilson Mathews
In TS file specify a custom name , then specify that name in HTML under <ng-container matColumnDef="name"> and then under ng-container tag add <td mat-cell *matCellDef="let element"> {{element.firstName}} }{{element.lastName}} </td> . This would do the trick.
12johnny
Oh I mean in the TS file, so I just declare a name variable?