Search code examples
angularangular-material-tablemat-card

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


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>

Solution

  • It doesn't seem impossible. Here is an example

    enter image description here

      <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>