How to add static content to my horizontal angular mat-table?
Adding an ng-container
would be adding a new matColumnDef
. You do not want a column instead you need a new row to display.
Since you are just mapping your displayColumns
to become your new "horizontal" table headers. You can just add actions
there to see the new row.
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];
Now to display your static content, we will need to modify your template. We know that the "horizontal" table header exists in element[0]
, we can use this with *ngIf
to correctly display the new row.
<ng-container [matColumnDef]="column" *ngFor="let column of displayColumns">
<th mat-header-cell *matHeaderCellDef> {{ column }} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="column == 0 || element[0] !== 'actions'; else actions">{{ element[column] }}</span>
<ng-template #actions>
<button (click)="accept($event)">Accept</button>
<button (click)="remove($event)">Remove</button>
</ng-template>
</td>
</ng-container>
Here is a working example on StackBlitz.