You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
38 lines
1.1 KiB
<div *ngIf="ingredients.length > 0">
|
|
<h2>List of Ingredients</h2>
|
|
<button mat-raised-button color="primary" (click)="navToAddIngredient()">
|
|
Add Ingredient
|
|
</button>
|
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
|
<!-- ID Column -->
|
|
<ng-container matColumnDef="id">
|
|
<th mat-header-cell *matHeaderCellDef>ID</th>
|
|
<td mat-cell *matCellDef="let ingredient">{{ ingredient.id }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef>Name</th>
|
|
<td mat-cell *matCellDef="let ingredient">
|
|
{{ ingredient.name }}
|
|
<button
|
|
mat-button
|
|
color="accent"
|
|
(click)="onEditIngredient(ingredient)"
|
|
>
|
|
Edit
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
|
</table>
|
|
<mat-paginator
|
|
[length]="ingredients.length"
|
|
[pageSize]="5"
|
|
[pageSizeOptions]="[5, 10, 20]"
|
|
>
|
|
</mat-paginator>
|
|
</div>
|