fix: ng update core 20

angular.json

@@ -16,7 +16,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/ipwa"
@@ -96,7 +96,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "ipwa:build:production"
@@ -112,13 +112,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "ipwa:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -139,5 +139,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -12,19 +12,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.14",
+    "@angular/animations": "^20.0.2",
     "@angular/cdk": "^19.2.18",
-    "@angular/cli": "^19.2.14",
-    "@angular/common": "^19.2.14",
-    "@angular/compiler": "^19.2.14",
-    "@angular/core": "^19.2.14",
-    "@angular/forms": "^19.2.14",
+    "@angular/cli": "^20.0.1",
+    "@angular/common": "^20.0.2",
+    "@angular/compiler": "^20.0.2",
+    "@angular/core": "^20.0.2",
+    "@angular/forms": "^20.0.2",
     "@angular/material": "^19.2.18",
     "@angular/material-moment-adapter": "^19.2.18",
-    "@angular/platform-browser": "^19.2.14",
-    "@angular/platform-browser-dynamic": "^19.2.14",
-    "@angular/router": "^19.2.14",
-    "@angular/service-worker": "^19.2.14",
+    "@angular/platform-browser": "^20.0.2",
+    "@angular/platform-browser-dynamic": "^20.0.2",
+    "@angular/router": "^20.0.2",
+    "@angular/service-worker": "^20.0.2",
     "marked": "^12.0.1",
     "moment": "^2.29.4",
     "rxjs": "~7.5.0",
@@ -32,8 +32,8 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.14",
-    "@angular/compiler-cli": "^19.2.14",
+    "@angular/build": "^20.0.1",
+    "@angular/compiler-cli": "^20.0.2",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",

src/app/admin-view/account-mgmt/account-mgmt.component.html

@@ -5,7 +5,9 @@
   </mat-form-field>
   <button mat-icon-button (click)="openUserCard()"><mat-icon>add</mat-icon></button>
 </div>
-<mat-spinner *ngIf="loading"></mat-spinner>
+@if (loading) {
+  <mat-spinner></mat-spinner>
+}
 <table mat-table [dataSource]="users">
   <div matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Imię</th>

src/app/admin-view/account-mgmt/user-edit/user-edit.component.html

@@ -22,7 +22,9 @@
           }
         </mat-select>
       </mat-form-field>
-            <span *ngIf="data.type == 'edit'">Data rejestracji:<br>{{regDate?.format('DD.MM.YYYY')}}</span>
+      @if (data.type == 'edit') {
+        <span>Data rejestracji:<br>{{regDate?.format('DD.MM.YYYY')}}</span>
+      }
     </div>
     <div>
       <mat-form-field appearance="outline" color="accent">
@@ -41,19 +43,33 @@
         } @else {
           <button mat-stroked-button disabled>Auto-Blokada nieczynna</button>
         }
-                <mat-form-field *ngIf="ls.permChecker(32)" color="accent">
+        @if (ls.permChecker(32)) {
+          <mat-form-field color="accent">
             <mat-label>Uprawnienia</mat-label>
             <mat-select multiple formControlName="flags">
-                        <mat-option [value]="1" *ngIf="ls.capCheck(1)">Wiadomości</mat-option>
-                        <mat-option [value]="2" *ngIf="ls.capCheck(2)">Jadłospis</mat-option>
-                        <mat-option [value]="4" *ngIf="ls.capCheck(4)">Powiadomienia</mat-option>
-                        <mat-option [value]="8" *ngIf="ls.capCheck(8)">Grupy</mat-option>
+              @if (ls.capCheck(1)) {
+                <mat-option [value]="1">Wiadomości</mat-option>
+              }
+              @if (ls.capCheck(2)) {
+                <mat-option [value]="2">Jadłospis</mat-option>
+              }
+              @if (ls.capCheck(4)) {
+                <mat-option [value]="4">Powiadomienia</mat-option>
+              }
+              @if (ls.capCheck(8)) {
+                <mat-option [value]="8">Grupy</mat-option>
+              }
               <mat-option [value]="16">Konta</mat-option>
-                        <mat-option [value]="64" *ngIf="ls.capCheck(32)">Klucze</mat-option>
-                        <mat-option [value]="128" *ngIf="ls.capCheck(16)">Czystość</mat-option>
+              @if (ls.capCheck(32)) {
+                <mat-option [value]="64">Klucze</mat-option>
+              }
+              @if (ls.capCheck(16)) {
+                <mat-option [value]="128">Czystość</mat-option>
+              }
             </mat-select>
           </mat-form-field>
         }
+      }
     </div>
   </form>
 </mat-dialog-content>
@@ -63,5 +79,7 @@
   }
   <button mat-stroked-button mat-dialog-close>Zamknij</button>
   <button mat-flat-button color="accent" (click)="submit()">Zapisz</button>
-    <mat-spinner diameter="32" color="accent" *ngIf="loading"></mat-spinner>
+  @if (loading) {
+    <mat-spinner diameter="32" color="accent"></mat-spinner>
+  }
 </mat-dialog-actions>

src/app/admin-view/grades/attendence-summary/attendence-summary.component.html

@@ -14,12 +14,16 @@
   </div>
   <div matColumnDef="hours">
     <th mat-header-cell *matHeaderCellDef mat-sort-header>Godziny</th>
-        <td mat-cell *matCellDef="let item"><span *ngFor="let i of item.hours.sort().reverse(); let isLast=last"><app-hour-display [value]="i"></app-hour-display>{{ isLast ? '' : ', '}}</span><span>{{item.notes}}</span></td>
+    <td mat-cell *matCellDef="let item">@for (i of item.hours.sort().reverse(); track i; let isLast = $last) {
+      <span><app-hour-display [value]="i"></app-hour-display>{{ isLast ? '' : ', '}}</span>
+      }<span>{{item.notes}}</span></td>
     </div>
     <div matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef>Usuń</th>
-        <td mat-cell *matCellDef="let item"><button mat-mini-fab color="warn" (click)="delete(item.room)" *ngIf="!item.auto"><mat-icon>delete</mat-icon></button></td>
+      <td mat-cell *matCellDef="let item">@if (!item.auto) {
+        <button mat-mini-fab color="warn" (click)="delete(item.room)"><mat-icon>delete</mat-icon></button>
+      }</td>
     </div>
     <tr mat-header-row *matHeaderRowDef="collumns"></tr>
     <tr mat-row *matRowDef="let rowData; columns: collumns"></tr>
-</table>
+  </table>

src/app/admin-view/grades/grades.component.html

@@ -7,20 +7,26 @@
     <button mat-mini-fab (click)="downloadData()" color="accent"><mat-icon>cancel</mat-icon></button>
     <button mat-mini-fab (click)="attendence()" color="accent"><mat-icon>overview</mat-icon></button>
     <button mat-mini-fab (click)="save()" color="accent"><mat-icon>save</mat-icon></button>
-        <button mat-mini-fab color="warn" (click)="remove()" *ngIf="id"><mat-icon>delete</mat-icon></button>
+    @if (id) {
+      <button mat-mini-fab color="warn" (click)="remove()"><mat-icon>delete</mat-icon></button>
+    }
   </div>
-    <div *ngFor="let item of things.controls; let i = index" formArrayName="things" id="things">
+  @for (item of things.controls; track item; let i = $index) {
+    <div formArrayName="things" id="things">
       <div formGroupName="{{i}}">
         <mat-checkbox formControlName="cb" #cb>
           <span control="label"></span>
-                <span *ngIf="cb.checked">
+          @if (cb.checked) {
+            <span>
               <button mat-icon-button (click)="group.sub(i)"><mat-icon>remove</mat-icon></button>
               <span control="weight"></span>
               <button mat-icon-button (click)="group.add(i)"><mat-icon>add</mat-icon></button>
             </span>
+          }
         </mat-checkbox>
       </div>
     </div>
+  }
   <mat-form-field style="width: 100%;">
     <mat-label>Dodatkowe uwagi</mat-label>
     <textarea matNativeControl cdkTextareaAutosize formControlName="tips"></textarea>

src/app/admin-view/groups/groups.component.html

@@ -1,9 +1,11 @@
 <button mat-raised-button color="accent" (click)="newGroup()">Nowa grupa</button>
-<mat-card *ngFor="let item of groups">
+@for (item of groups; track item) {
+  <mat-card>
     <mat-card-header>
       <mat-card-title contenteditable appCe (edit)="nameEdit(item._id, $event)">{{item.name}}</mat-card-title>
     </mat-card-header>
     <mat-card-actions>
       <button mat-button color="warn" (click)="remove(item._id)">Usuń</button>
     </mat-card-actions>
-</mat-card>
+  </mat-card>
+}

src/app/admin-view/key/key.component.html

@@ -8,7 +8,9 @@
   </mat-chip-listbox>
   <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
 </div>
-<mat-spinner *ngIf="loading" color="accent"></mat-spinner>
+@if (loading) {
+  <mat-spinner color="accent"></mat-spinner>
+}
 <table mat-table [dataSource]="keys">
   <div matColumnDef="room">
     <th mat-header-cell *matHeaderCellDef>Sala</th>
@@ -33,7 +35,9 @@
   <div matColumnDef="actions">
     <th mat-header-cell *matHeaderCellDef>Akcje</th>
     <td mat-cell *matCellDef="let element">
-            <button mat-mini-fab (click)="tb(element._id)" *ngIf="!element.tb"><mat-icon>person_cancel</mat-icon></button>
+      @if (!element.tb) {
+        <button mat-mini-fab (click)="tb(element._id)"><mat-icon>person_cancel</mat-icon></button>
+      }
     </td>
   </div>
   <tr mat-header-row *matHeaderRowDef="collumns"></tr>

src/app/admin-view/key/new-key/new-key.component.html

@@ -7,12 +7,16 @@
           <mat-option [value]="item">{{item}}</mat-option>
         }
       </mat-select>
-            <mat-error *ngIf="form.controls['room'].hasError('required')">Wymagane</mat-error>
+      @if (form.controls['room'].hasError('required')) {
+        <mat-error>Wymagane</mat-error>
+      }
     </mat-form-field>
     <mat-form-field color="accent">
       <mat-label>Wypożyczający</mat-label>
       <app-user-search formControlName="user" required/>
-            <mat-error *ngIf="form.controls['user'].hasError('required')">Wymagane</mat-error>
+      @if (form.controls['user'].hasError('required')) {
+        <mat-error>Wymagane</mat-error>
+      }
     </mat-form-field>
     <button mat-button>Wyślij</button>
   </form>

src/app/admin-view/menu-new/menu-new.component.html

@@ -12,7 +12,9 @@
   <button mat-icon-button (click)="addDate()"><mat-icon>add</mat-icon></button>
   <button mat-icon-button (click)="print()"><mat-icon>print</mat-icon></button>
 </div>
-<mat-spinner *ngIf="loading"></mat-spinner>
+@if (loading) {
+  <mat-spinner></mat-spinner>
+}
 <table mat-table [dataSource]="dataSource">
   <div matColumnDef="day">
     <th mat-header-cell *matHeaderCellDef>Dzień</th>
@@ -27,7 +29,9 @@
     <th mat-header-cell *matHeaderCellDef>Śniadanie</th>
     <td mat-cell *matCellDef="let element">
       <ul class="non-editable">
-                <li *ngFor="let i of ls.defaultItems.sn">{{i}}</li>
+        @for (i of ls.defaultItems.sn; track i) {
+          <li>{{i}}</li>
+        }
       </ul><hr>
       <app-list-editor [(list)]="element.sn.fancy" (edit)="editSn(element._id)" dataList="sn-fancy"/><hr>
       <ul>
@@ -56,10 +60,14 @@
   <div matColumnDef="kol">
     <th mat-header-cell *matHeaderCellDef>Kolacja</th>
     <td mat-cell *matCellDef="let element">
-            <div [ngSwitch]="element.day.isoWeekday()">
-                <div *ngSwitchDefault>
+      <div>
+        @switch (element.day.isoWeekday()) {
+          @default {
+            <div>
               <ul class="non-editable">
-                        <li *ngFor="let i of ls.defaultItems.kol">{{i}}</li>
+                @for (i of ls.defaultItems.kol; track i) {
+                  <li>{{i}}</li>
+                }
               </ul><hr>
               <ul>
                 <li><app-field-editor category="Kolacja" [(word)]="element.kol" list="kol" (wordChange)="editKol(element._id)"/></li>
@@ -68,10 +76,14 @@
                 Opinie wychowanków
               </button>
             </div>
-                <div *ngSwitchCase="5" class="non-editable">
+          }
+          @case (5) {
+            <div class="non-editable">
               <p>Kolacja w domu!</p>
               <p>(Nie edytowalne)</p>
             </div>
+          }
+        }
       </div>
     </td>
   </div>
@@ -80,32 +92,50 @@
   <tr mat-row *matRowDef="let row; columns: dcols"></tr>
 </table>
 
-<ng-container *ngIf="options">
+@if (options) {
   <datalist id="sn-fancy">
-        <option *ngFor="let i of options.sn.fancy">{{i}}</option>
+    @for (i of options.sn.fancy; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="sn-second">
-        <option *ngFor="let i of options.sn.second">{{i}}</option>
+    @for (i of options.sn.second; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-soup">
-        <option *ngFor="let i of options.ob.soup">{{i}}</option>
+    @for (i of options.ob.soup; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-vege">
-        <option *ngFor="let i of options.ob.vege">{{i}}</option>
+    @for (i of options.ob.vege; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-meal">
-        <option *ngFor="let i of options.ob.meal">{{i}}</option>
+    @for (i of options.ob.meal; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-condiments">
-        <option *ngFor="let i of options.ob.condiments">{{i}}</option>
+    @for (i of options.ob.condiments; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-drink">
-        <option *ngFor="let i of options.ob.drink">{{i}}</option>
+    @for (i of options.ob.drink; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="ob-other">
-        <option *ngFor="let i of options.ob.other">{{i}}</option>
+    @for (i of options.ob.other; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
   <datalist id="kol">
-        <option *ngFor="let i of options.kol">{{i}}</option>
+    @for (i of options.kol; track i) {
+      <option>{{i}}</option>
+    }
   </datalist>
-</ng-container>
+}

src/app/admin-view/news-edit/news-edit.component.html

@@ -1,9 +1,14 @@
 <button mat-raised-button (click)="newPost()" color="accent">Nowy post</button>
-<mat-spinner *ngIf="loading"></mat-spinner>
-<mat-card *ngFor="let item of news">
+@if (loading) {
+  <mat-spinner></mat-spinner>
+}
+@for (item of news; track item) {
+  <mat-card>
     <mat-card-header>
       <mat-card-title>{{item.title}}</mat-card-title>
-        <mat-icon *ngIf="item.pinned">push_pin</mat-icon>
+      @if (item.pinned) {
+        <mat-icon>push_pin</mat-icon>
+      }
       <mat-card-subtitle>{{item._id}}</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content [innerHTML]="item.formatted">
@@ -12,9 +17,15 @@
       <button mat-mini-fab (click)="editPost(item)"><mat-icon>edit</mat-icon></button>
       <button mat-mini-fab (click)="pinToggle(item)"><mat-icon>push_pin</mat-icon></button>
       <button mat-mini-fab (click)="visibleToggle(item)">
-            <div [ngSwitch]="item.visible">
-                <mat-icon *ngSwitchCase="true">visibility</mat-icon>
-                <mat-icon *ngSwitchDefault>visibility_off</mat-icon>
+        <div>
+          @switch (item.visible) {
+            @case (true) {
+              <mat-icon>visibility</mat-icon>
+            }
+            @default {
+              <mat-icon>visibility_off</mat-icon>
+            }
+          }
         </div>
       </button>
       <button mat-mini-fab (click)="delete(item._id)"><mat-icon>delete_forever</mat-icon></button>
@@ -22,9 +33,12 @@
     <mat-card-footer>
       <p>{{item.date | date:'d-LL-yyyy HH:mm'}}</p>
     </mat-card-footer>
-</mat-card>
-<mat-card *ngIf="news.length == 0">
+  </mat-card>
+}
+@if (news.length == 0) {
+  <mat-card>
     <p>
       Brak wiadomości.
     </p>
-</mat-card>
+  </mat-card>
+}

src/app/admin-view/notifications/notifications.component.html

@@ -13,14 +13,18 @@
           <input matInput type="text" formControlName="room">
         </mat-form-field>
       </mat-radio-button>
-            <mat-radio-button value="group" *ngIf="ls.capCheck(8)">
+      @if (ls.capCheck(8)) {
+        <mat-radio-button value="group">
           <mat-form-field>
             <mat-label>Grupa</mat-label>
             <mat-select formControlName="group">
-                        <mat-option *ngFor="let item of groups" [value]="item._id">{{item.name}}</mat-option>
+              @for (item of groups; track item) {
+                <mat-option [value]="item._id">{{item.name}}</mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </mat-radio-button>
+      }
     </mat-radio-group>
   </div>
   <mat-form-field>
@@ -37,6 +41,8 @@
         <mat-icon>send</mat-icon>
         Wyślij
       </button>
-</form>
+    </form>
 
-<p *ngIf="success">Udało się wysłać {{success.sent}} z {{success.possible}} = {{success.sent/success.possible | percent}}</p>
+    @if (success) {
+      <p>Udało się wysłać {{success.sent}} z {{success.possible}} = {{success.sent/success.possible | percent}}</p>
+    }

src/app/admin-view/notifications/outbox/message/message.component.html

@@ -8,14 +8,18 @@
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
-        <p *ngIf="body">
+    @if (body) {
+      <p>
         {{body}}
       </p>
+    }
     <hr>
       <ul>
         @for (user of rcpts; track $index) {
           <li>
-                <span *ngIf="user.room">{{user.room}}: </span>{{user.fname}} {{user.surname}} <span
+            @if (user.room) {
+              <span>{{user.room}}: </span>
+              }{{user.fname}} {{user.surname}} <span
             style="color: gray">({{user.uname}})</span>
           </li>
         }
@@ -23,9 +27,15 @@
     </mat-card-content>
     <mat-card-footer>
       <mat-card-actions>
-            <button mat-stroked-button (click)="getMessage()" *ngIf="!body">Wczytaj treść</button>
-            <button mat-stroked-button (click)="getRcpts()" *ngIf="!rcpts">Wczytaj odbiorców</button>
-            <mat-spinner diameter="32" color="accent" *ngIf="loading"></mat-spinner>
+        @if (!body) {
+          <button mat-stroked-button (click)="getMessage()">Wczytaj treść</button>
+        }
+        @if (!rcpts) {
+          <button mat-stroked-button (click)="getRcpts()">Wczytaj odbiorców</button>
+        }
+        @if (loading) {
+          <mat-spinner diameter="32" color="accent"></mat-spinner>
+        }
       </mat-card-actions>
     </mat-card-footer>
-</mat-card>
+  </mat-card>

src/app/admin-view/toolbar/toolbar.component.html

@@ -2,13 +2,19 @@
   <button mat-icon-button (click)="drawer.toggle()"><mat-icon>menu</mat-icon></button>
   <span>{{title.getTitle()}}</span>
   <span style="flex: 1 1 auto"></span>
-    <button mat-icon-button *ngIf="toolbar.menu" [matMenuTriggerFor]="menu" (click)="openMenu()"><mat-icon>more_vert</mat-icon></button>
+  @if (toolbar.menu) {
+    <button mat-icon-button [matMenuTriggerFor]="menu" (click)="openMenu()"><mat-icon>more_vert</mat-icon></button>
+  }
 </mat-toolbar>
 <mat-menu #menu="matMenu">
   @for (item of _menu; track $index) {
-        <button mat-menu-item *ngIf="item.check ?? true" (click)="toolbar.comp[item.fn]()">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
+    @if (item.check ?? true) {
+      <button mat-menu-item (click)="toolbar.comp[item.fn]()">
+        @if (item.icon) {
+          <mat-icon>{{item.icon}}</mat-icon>
+        }
         <span>{{item.title}}</span>
       </button>
     }
+  }
 </mat-menu>

src/app/app-view/menu/menu.component.html

@@ -1,44 +1,73 @@
 <div id="cards">
-    <mat-spinner *ngIf="loading"></mat-spinner>
-    <mat-card *ngIf="gettitle">
+  @if (loading) {
+    <mat-spinner></mat-spinner>
+  }
+  @if (gettitle) {
+    <mat-card>
       <mat-card-header>
         <mat-card-title>{{gettitle}}</mat-card-title>
       </mat-card-header>
       <mat-card-content></mat-card-content>
     </mat-card>
-    <mat-card *ngIf="getsn">
+  }
+  @if (getsn) {
+    <mat-card>
       <mat-card-header>
         <mat-card-title>Śniadanie</mat-card-title>
       </mat-card-header>
       <mat-card-content>
         <ul>
-                <li *ngFor="let i of ls.defaultItems.sn">{{i}}</li>
-                <li *ngFor="let i of getsn.fancy">{{capitalize(i)}}</li>
-                <li *ngIf="getsn.second">{{capitalize(getsn.second)}}</li>
+          @for (i of ls.defaultItems.sn; track i) {
+            <li>{{i}}</li>
+          }
+          @for (i of getsn.fancy; track i) {
+            <li>{{capitalize(i)}}</li>
+          }
+          @if (getsn.second) {
+            <li>{{capitalize(getsn.second)}}</li>
+          }
         </ul>
       </mat-card-content>
     </mat-card>
-    <mat-card *ngIf="getob">
+  }
+  @if (getob) {
+    <mat-card>
       <mat-card-header>
         <mat-card-title>Obiad</mat-card-title>
       </mat-card-header>
       <mat-card-content>
         <ul>
-                <li *ngIf="getob.soup">Z: {{getob.soup}}</li>
-                <li *ngIf="getob.vege" style="color: #43A047">V: {{getob.vege}}</li>
-                <li *ngIf="getob.meal">{{getob.meal}}</li>
-                <li *ngFor="let i of getob.condiments">{{i}}</li>
-                <li *ngIf="getob.drink">{{getob.drink}}</li>
-                <li *ngFor="let i of getob.other">{{i}}</li>
+          @if (getob.soup) {
+            <li>Z: {{getob.soup}}</li>
+          }
+          @if (getob.vege) {
+            <li style="color: #43A047">V: {{getob.vege}}</li>
+          }
+          @if (getob.meal) {
+            <li>{{getob.meal}}</li>
+          }
+          @for (i of getob.condiments; track i) {
+            <li>{{i}}</li>
+          }
+          @if (getob.drink) {
+            <li>{{getob.drink}}</li>
+          }
+          @for (i of getob.other; track i) {
+            <li>{{i}}</li>
+          }
         </ul>
       </mat-card-content>
       <mat-card-actions>
         <button mat-icon-button (click)="vote('ob', '+')"><mat-icon [color]="menu!.obv == '+' ? 'primary' : null">thumb_up</mat-icon></button>
-            <span *ngIf="menu?.stat?.ob != 'NaN'">{{menu?.stat?.ob}}%</span>
+        @if (menu?.stat?.ob != 'NaN') {
+          <span>{{menu?.stat?.ob}}%</span>
+        }
         <button mat-icon-button (click)="vote('ob', '-')"><mat-icon [color]="menu!.obv == '-' ? 'warn' : null">thumb_down</mat-icon></button>
       </mat-card-actions>
     </mat-card>
-    <mat-card *ngIf="getkol">
+  }
+  @if (getkol) {
+    <mat-card>
       <mat-card-header>
         <mat-card-title>Kolacja</mat-card-title>
       </mat-card-header>
@@ -47,15 +76,20 @@
       </mat-card-content>
       <mat-card-actions>
         <button mat-icon-button (click)="vote('kol', '+')"><mat-icon [color]="menu!.kolv == '+' ? 'primary' : null">thumb_up</mat-icon></button>
-            <span *ngIf="menu?.stat?.kol != 'NaN'">{{menu?.stat?.kol}}%</span>
+        @if (menu?.stat?.kol != 'NaN') {
+          <span>{{menu?.stat?.kol}}%</span>
+        }
         <button mat-icon-button (click)="vote('kol', '-')"><mat-icon [color]="menu!.kolv == '-' ? 'warn' : null">thumb_down</mat-icon></button>
       </mat-card-actions>
     </mat-card>
-    <mat-card *ngIf="!(getkol || getob || getsn || loading || gettitle)">
+  }
+  @if (!(getkol || getob || getsn || loading || gettitle)) {
+    <mat-card>
       <mat-card-content id="no-data">
         Brak danych, wybierz inny dzień.
       </mat-card-content>
     </mat-card>
+  }
   <button id="alrg" mat-icon-button (click)="alrg()"><mat-icon color="primary">info</mat-icon></button>
 </div>
 <app-date-selector [(date)]="day" [filter]="filter"></app-date-selector>

src/app/app-view/news/news.component.html

@@ -1,7 +1,12 @@
-<mat-spinner *ngIf="loading"></mat-spinner>
-<mat-card *ngFor="let item of news">
+@if (loading) {
+  <mat-spinner></mat-spinner>
+}
+@for (item of news; track item) {
+  <mat-card>
     <mat-card-header>
-        <mat-icon *ngIf="item.pinned">push_pin</mat-icon>
+      @if (item.pinned) {
+        <mat-icon>push_pin</mat-icon>
+      }
       <mat-card-title>{{item.title}}</mat-card-title>
     </mat-card-header>
     <mat-card-content [innerHTML]="item.content">
@@ -9,9 +14,12 @@
     <mat-card-footer>
       <p>{{item.date | date:'d-LL-yyyy HH:mm'}}</p>
     </mat-card-footer>
-</mat-card>
-<mat-card *ngIf="news.length == 0">
+  </mat-card>
+}
+@if (news.length == 0) {
+  <mat-card>
     <p>
       Brak wiadomości.
     </p>
-</mat-card>
+  </mat-card>
+}

src/app/app-view/personal/change-password-dialog/change-password-dialog.component.html

@@ -10,8 +10,12 @@
   <mat-form-field appearance="outline">
     <mat-label>Powtórz nowe hasło</mat-label>
     <input type="password" matInput formControlName="newPassRepeat">
-        <mat-error *ngIf="form.errors?.['noMatch']">Hasła muszą się zgadzać</mat-error>
+    @if (form.errors?.['noMatch']) {
+      <mat-error>Hasła muszą się zgadzać</mat-error>
+    }
   </mat-form-field><br>
   <button mat-stroked-button>Zmień hasło</button><br>
-    <p *ngIf="error" style="color: red;">{{error}}</p>
+  @if (error) {
+    <p style="color: red;">{{error}}</p>
+  }
 </form>

src/app/app-view/personal/clean/clean.component.html

@@ -5,13 +5,19 @@
   }
   @else {
   <h1>Nie oceniono</h1>
+}
+@if (notes.length > 0) {
+  <p>Uwagi:</p>
+}
+<ul>
+  @for (i of notes; track i) {
+    <li>{{i.label}}@if (i.weight > 1) {
+      <span> ({{i.weight}})</span>
+    }</li>
   }
-    <p *ngIf="notes.length > 0">Uwagi:</p>
-    <ul>
-        <li *ngFor="let i of notes">{{i.label}}<span *ngIf="i.weight > 1"> ({{i.weight}})</span></li>
-    </ul>
-    <p>{{tips}}</p>
-    <app-date-selector [(date)]="day" [filter]="filter"/>
+</ul>
+<p>{{tips}}</p>
+<app-date-selector [(date)]="day" [filter]="filter"/>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-icon-button mat-dialog-close><mat-icon>close</mat-icon></button>

src/app/app-view/personal/extra/extra.component.html

@@ -3,7 +3,9 @@
   <mat-action-list>
     @for (link of LINKS; track link) {
       <button mat-list-item (click)="open(link.component)">
-                <mat-icon matListItemIcon *ngIf="link.icon">{{link.icon}}</mat-icon>
+        @if (link.icon) {
+          <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
+        }
         <div matListItemTitle>{{link.title}}</div>
       </button>
     }

src/app/app-view/personal/personal.component.html

@@ -8,28 +8,44 @@
     <div matListItemTitle>Zmiana hasła</div>
   </button>
   <button mat-list-item (click)="checkUpdate()">
-        <div matListItemIcon [ngSwitch]="checking">
-            <mat-spinner diameter="25" *ngSwitchCase="true"></mat-spinner>
-            <mat-icon *ngSwitchCase="false">update</mat-icon>
-            <mat-icon *ngSwitchCase="'err'" color="warn">error</mat-icon>
-            <mat-icon *ngSwitchCase="'aval'">upgrade</mat-icon>
+    <div matListItemIcon>
+      @switch (checking) {
+        @case (true) {
+          <mat-spinner diameter="25"></mat-spinner>
+        }
+        @case (false) {
+          <mat-icon>update</mat-icon>
+        }
+        @case ('err') {
+          <mat-icon color="warn">error</mat-icon>
+        }
+        @case ('aval') {
+          <mat-icon>upgrade</mat-icon>
+        }
+      }
     </div>
     <div matListItemTitle>Sprawdź dostępność aktualizacji</div>
     <div matListItemLine>Aktualna wersja: {{version}}</div>
   </button>
-     <button mat-list-item (click)="openKey()" *ngIf="ls.capCheck(32)">
+  @if (ls.capCheck(32)) {
+    <button mat-list-item (click)="openKey()">
       <mat-icon matListItemIcon>key</mat-icon>
       <div matListItemTitle>Klucze</div>
     </button>
-     <button mat-list-item *ngIf="ls.capCheck(16) && ls.hasRoom()" (click)="openClean()">
+  }
+  @if (ls.capCheck(16) && ls.hasRoom()) {
+    <button mat-list-item (click)="openClean()">
       <mat-icon matListItemIcon>cleaning_services</mat-icon>
       <div matListItemTitle>Oceny za czystość</div>
     </button>
-     <button mat-list-item (click)="goToAdmin()" *ngIf="ls.admin">
+  }
+  @if (ls.admin) {
+    <button mat-list-item (click)="goToAdmin()">
       <mat-icon matListItemIcon color="accent">admin_panel_settings</mat-icon>
       <div matListItemTitle>Panel administracyjny</div>
       <div matListItemLine>Poprzednio Tryb edycji</div>
     </button>
+  }
   <button mat-list-item (click)="openExtra()">
     <mat-icon matListItemIcon>settings_applications</mat-icon>
     <div matListItemTitle>Dodatkowe ustawienia</div>

src/app/commonComponents/list-editor/list-editor.component.html

@@ -1,22 +1,35 @@
-<ul *ngIf="!focused">
-    <li *ngFor="let item of _list">
+@if (!focused) {
+  <ul>
+    @for (item of _list; track item) {
+      <li>
         @if (options) {
           {{idToOption(item)}}
         } @else {
           {{item}}
         }
       </li>
-    <li *ngIf="_list.length == 0">[Puste]</li>
-</ul>
-<div *ngIf="focused" class="vertical">
-    <button *ngIf="workList.length == 0" (click)="addPos(0)">+</button>
+    }
+    @if (_list.length == 0) {
+      <li>[Puste]</li>
+    }
+  </ul>
+}
+@if (focused) {
+  <div class="vertical">
+    @if (workList.length == 0) {
+      <button (click)="addPos(0)">+</button>
+    }
     <div cdkDropList class="vertical" (cdkDropListDropped)="drop($event)">
       @for (item of workList; track $index) {
         <span cdkDrag>
           <input type="text" [(ngModel)]="workList[$index]" [attr.list]="dataList" (keyup.enter)="addPos($index)" #input>
-                <select *ngIf="dropdown" [(ngModel)]="workList[$index]">
-                    <option *ngFor="let option of options" [value]="option.id" [selected]="option.id == item">{{option.text}}</option>
+          @if (dropdown) {
+            <select [(ngModel)]="workList[$index]">
+              @for (option of options; track option) {
+                <option [value]="option.id" [selected]="option.id == item">{{option.text}}</option>
+              }
             </select>
+          }
           <button (click)="remPos($index)">-</button>
           <button (click)="addPos($index)">+</button>
         </span>
@@ -26,4 +39,5 @@
       <button (click)="save()">Zapisz</button>
       <button (click)="cancel()">Anuluj</button>
     </span>
-</div>
+  </div>
+}

src/app/commonComponents/user-search/user-search.component.html

@@ -1,15 +1,19 @@
 <div role="group" class="app-user-search-container" (focusin)="onFocusIn($event)" (focusout)="onFocusOut($event)">
   <input type="text" [matAutocomplete]="ac" [formControl]="control" #inputComponent class="input-element">
-    <mat-spinner color="accent" diameter="16" *ngIf="loading" matSuffix></mat-spinner>
+  @if (loading) {
+    <mat-spinner color="accent" diameter="16" matSuffix></mat-spinner>
+  }
   <mat-autocomplete #ac="matAutocomplete" autoActiveFirstOption (optionSelected)="saveValue($event)" [displayWith]="displayFn">
     @for (item of list; track $index) {
       <mat-option [value]="item">
         @if (item.fname) {
-                    {{item.fname}} {{item.surname}} <span *ngIf="item.room" class="room">({{item.room}})</span>
+          {{item.fname}} {{item.surname}} @if (item.room) {
+          <span class="room">({{item.room}})</span>
+        }
       } @else {
         {{item.uname}}
       }
     </mat-option>
   }
-    </mat-autocomplete>
+</mat-autocomplete>
 </div>

src/app/login/login.component.html

@@ -10,7 +10,9 @@
         <input type="password" matInput formControlName="pass">
       </mat-form-field>
       <button mat-stroked-button color="primary" (click)="submit()">Zaloguj</button>
-            <p *ngIf="error" style="color: red;">{{error}}</p>
+      @if (error) {
+        <p style="color: red;">{{error}}</p>
+      }
     </form>
   </mat-card-content>
 </mat-card>

tsconfig.json

@@ -14,7 +14,7 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",