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>

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

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { Period } from 'src/app/period/period';

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

@@ -19,16 +19,20 @@
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto">
           <mat-select formControlName="period">
-            <mat-option *ngFor="let p of periods" [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
+            @for (p of periods; track p) {
+              <mat-option [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
           <mat-select formControlName="productGroup" (selectionChange)="filterProductGroup($event.value)">
             <mat-option>-- All Products --</mat-option>
-            <mat-option *ngFor="let mc of productGroups" [value]="mc.id">
-              {{ mc.name }}
-            </mat-option>
+            @for (mc of productGroups; track mc) {
+              <mat-option [value]="mc.id">
+                {{ mc.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>