Chore: Upgraded to Angular v17 and all the refactoring for that

Chore: Updated all dependencies in overlord

overlord/src/app/recipe/recipe-detail/recipe-detail.component.html

@@ -40,7 +40,9 @@
             [displayWith]="displayProduct"
             (optionSelected)="productSelected($event)"
           >
-            <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+            @for (product of products | async; track product) {
+              <mat-option [value]="product">{{ product.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -65,9 +67,9 @@
             [displayWith]="displayIngredient"
             (optionSelected)="ingredientSelected($event)"
           >
-            <mat-option *ngFor="let product of ingredients | async" [value]="product"
-              >{{ product.name }} ({{ product.fractionUnits }})</mat-option
-            >
+            @for (product of ingredients | async; track product) {
+              <mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
@@ -127,6 +129,8 @@
     <button mat-raised-button (click)="save()" color="primary" class="mr-5">
       {{ item.id ? 'Update' : 'Save' }}
     </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="item.id">Delete</button>
+    @if (item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>