Is it possible to use mat-card
instead of mat-table
. Here is an example which is of course not working. But this is just an example in which direction I would like to go and display the data.
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-card class="democard">
<mat-card-header>
<mat-card-title>{{column}}</mat-card-title>
<mat-card-subtitle>xxxx</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<section mat-cell *matCellDef="let emp">
{{ emp[column] }}
</section>
</mat-card-content>
</mat-card>
</ng-container>
It doesn't seem impossible. Here is an example
<ng-container matColumnDef="table">
<th mat-header-cell *matHeaderCellDef>Card</th>
<td mat-cell *matCellDef="let element">
<mat-card class="democard">
<mat-card-header>
<mat-card-title>{{element.weight}}</mat-card-title>
<mat-card-subtitle>xxxx</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
{{ element.symbol }}
</mat-card-content>
</mat-card>
</td>
</ng-container>