Can I use *ngFor inside a <mat-cell> in Angular?
I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes...
My current table setup looks like this:
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
<mat-cell *matCellDef="let user"> {{ user.email }} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef mat-sort-header> Phone </mat-header-cell>
<mat-cell *matCellDef="let user"> {{ user.phone }} </mat-cell>
</ng-container>
Now, I need to include a row displaying {{ user.book.name}}, but my attempt at using *ngFor is not functioning as expected. Here's what I tried:
<ng-container *ngFor="let book of user.book" [matColumnDef]="book">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ book}} </th>
<td mat-cell *matCellDef="let book"> {{ book.name }} </td>
</ng-container>
This solution has caused some issues throughout my app...
You can see an example on StackBlitz. The "OBJECT" mentioned in the code represents the placeholder where I am trying to display the names of books.