Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -47,43 +47,49 @@
           <span class="flex-60">{{ checkerInboxDetail.entityName }}</span>
         </div>
 
-        <div class="flex-fill" *ngIf="checkerInboxDetail.resourceId">
-          <span class="flex-40">{{ 'labels.inputs.Resource ID' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.resourceId }}</span>
-        </div>
+        @if (checkerInboxDetail.resourceId) {
+          <div class="flex-fill">
+            <span class="flex-40">{{ 'labels.inputs.Resource ID' | translate }}:</span>
+            <span class="flex-60">{{ checkerInboxDetail.resourceId }}</span>
+          </div>
+        }
 
         <div class="flex-fill">
           <span class="flex-40">{{ 'labels.inputs.Date' | translate }}:</span>
           <span class="flex-60">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
         </div>
 
-        <div class="flex-fill" *ngIf="checkerInboxDetail.officeName">
-          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.officeName }}</span>
-        </div>
+        @if (checkerInboxDetail.officeName) {
+          <div class="flex-fill">
+            <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
+            <span class="flex-60">{{ checkerInboxDetail.officeName }}</span>
+          </div>
+        }
 
-        <div class="flex-fill" *ngIf="checkerInboxDetail.savingsAccountNo">
-          <span class="flex-40">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.savingsAccountNo }}</span>
-        </div>
+        @if (checkerInboxDetail.savingsAccountNo) {
+          <div class="flex-fill">
+            <span class="flex-40">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
+            <span class="flex-60">{{ checkerInboxDetail.savingsAccountNo }}</span>
+          </div>
+        }
 
-        <div class="flex-fill" *ngIf="checkerInboxDetail.groupLevelName">
-          <span class="flex-40"> {{ checkerInboxDetail.groupLevelName }}</span>
-          <span class="flex-60">{{ checkerInboxDetail.groupName }}</span>
-        </div>
+        @if (checkerInboxDetail.groupLevelName) {
+          <div class="flex-fill">
+            <span class="flex-40"> {{ checkerInboxDetail.groupLevelName }}</span>
+            <span class="flex-60">{{ checkerInboxDetail.groupName }}</span>
+          </div>
+        }
 
-        <ng-container *ngIf="displayJSONData">
+        @if (displayJSONData) {
           <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Command' | translate }}</h3>
-
           <mat-divider [inset]="true"></mat-divider>
-
-          <ng-container *ngFor="let json of jsondata | keyvalue">
+          @for (json of jsondata | keyvalue; track json) {
             <div class="flex-fill">
               <span class="flex-40">{{ json.key }}:</span>
               <span class="flex-60">{{ json.value }}</span>
             </div>
-          </ng-container>
-        </ng-container>
+          }
+        }
       </div>
     </mat-card-content>
   </mat-card>