50 lines
1.8 KiB
HTML
50 lines
1.8 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">
|
|
{{element.id}}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef> name </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
{{element.name}}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="description">
|
|
<th mat-header-cell *matHeaderCellDef> description </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
{{element.description}}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="image">
|
|
<th mat-header-cell *matHeaderCellDef> image </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<img [src]="element.image || 'https://placehold.co/200x200'" [alt]="element.image ? element.name : ''" width="200" height="200">
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef> actions </th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<button mat-button (click)="deliver(element)">Commander</button>
|
|
<button mat-button [routerLink]="['/recipe', element.id, 'edit']">Modifier</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let element; columns: displayedColumns" [routerLink]="['/recipe/', element.id]"></tr>
|
|
</table>
|
|
|
|
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
|
|
showFirstLastButtons
|
|
aria-label="Select page of recipes">
|
|
</mat-paginator>
|
|
</div>
|