48 lines
1.5 KiB
HTML
48 lines
1.5 KiB
HTML
<div class="mat-elevation-z8">
|
|
<table mat-table [dataSource]="dataSource">
|
|
|
|
<!-- Position Column -->
|
|
<ng-container matColumnDef="id">
|
|
<th mat-header-cell *matHeaderCellDef> id </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<a [routerLink]="['/recipe/', element.id]" >
|
|
{{element.id}}
|
|
</a>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef> name </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<a [routerLink]="['/recipe/', element.id]" >
|
|
{{element.name}}
|
|
</a>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="description">
|
|
<th mat-header-cell *matHeaderCellDef> description </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<a [routerLink]="['/recipe/', element.id]" >
|
|
{{element.description}}
|
|
</a>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="image">
|
|
<th mat-header-cell *matHeaderCellDef> image </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<img src="https://placehold.co/200x200">
|
|
</td>
|
|
</ng-container>
|
|
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
|
|
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
|
|
showFirstLastButtons
|
|
aria-label="Select page of periodic elements">
|
|
</mat-paginator>
|
|
</div>
|