Is it possible to use mat-card instead of mat-table?

Question

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>

score 1 · Accepted Answer · answered May 03 '23 at 12:31

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>

A good one! Will give it a try. – k.vincent May 03 '23 at 12:43 — k.vincent, May 03 '23 at 12:43

Is it possible to use mat-card instead of mat-table?

1 Answers1