Files
tiramisu/src/app/recipes/recipes.component.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>