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/navigation/client-navigation/client-navigation.component.html

@@ -29,45 +29,65 @@
   <mat-tab-group>
     <mat-tab label="Details">
       <div class="layout-row-wrap">
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.firstName">
-          {{ 'labels.inputs.First Name' | translate }}
-        </div>
+        @if (clientData.firstName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.First Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.firstName">
-          {{ clientData.firstName }}
-        </div>
+        @if (clientData.firstName) {
+          <div class="flex-50">
+            {{ clientData.firstName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.middleName">
-          {{ 'labels.inputs.Middle Name' | translate }}
-        </div>
+        @if (clientData.middleName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Middle Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.middleName">
-          {{ clientData.middleName }}
-        </div>
+        @if (clientData.middleName) {
+          <div class="flex-50">
+            {{ clientData.middleName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.lastName">
-          {{ 'labels.inputs.Last Name' | translate }}
-        </div>
+        @if (clientData.lastName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Last Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.lastName">
-          {{ clientData.lastName }}
-        </div>
+        @if (clientData.lastName) {
+          <div class="flex-50">
+            {{ clientData.lastName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.dateOfBirth">
-          {{ 'labels.inputs.Date of Birth' | translate }}
-        </div>
+        @if (clientData.dateOfBirth) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Date of Birth' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.dateOfBirth">
-          {{ clientData.dateOfBirth | dateFormat }}
-        </div>
+        @if (clientData.dateOfBirth) {
+          <div class="flex-50">
+            {{ clientData.dateOfBirth | dateFormat }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.mobileNo">
-          {{ 'labels.inputs.Mobile Number' | translate }}
-        </div>
+        @if (clientData.mobileNo) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Mobile Number' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.mobileNo">
-          {{ clientData.mobileNo }}
-        </div>
+        @if (clientData.mobileNo) {
+          <div class="flex-50">
+            {{ clientData.mobileNo }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Activation Date' | translate }}
@@ -77,40 +97,56 @@
           {{ clientData.activationDate | dateFormat }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.officeName">
-          {{ 'labels.inputs.Associated Office' | translate }}
-        </div>
+        @if (clientData.officeName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Office' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.officeName">
-          {{ clientData.officeName }}
-        </div>
+        @if (clientData.officeName) {
+          <div class="flex-50">
+            {{ clientData.officeName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.staffName">
-          {{ 'labels.inputs.Associated Staff' | translate }}
-        </div>
+        @if (clientData.staffName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Staff' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.staffName">
-          {{ clientData.staffName }}
-        </div>
+        @if (clientData.staffName) {
+          <div class="flex-50">
+            {{ clientData.staffName }}
+          </div>
+        }
       </div>
     </mat-tab>
 
-    <mat-tab label="Loan Accounts" *ngIf="clientAccountsData && clientAccountsData.loanAccounts">
-      <mifosx-loan-account-table [loanAccountData]="clientAccountsData.loanAccounts"></mifosx-loan-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.loanAccounts) {
+      <mat-tab label="Loan Accounts">
+        <mifosx-loan-account-table [loanAccountData]="clientAccountsData.loanAccounts"></mifosx-loan-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Savings Accounts" *ngIf="clientAccountsData && clientAccountsData.savingsAccounts">
-      <mifosx-savings-account-table
-        [savingsAccountData]="clientAccountsData.savingsAccounts"
-      ></mifosx-savings-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.savingsAccounts) {
+      <mat-tab label="Savings Accounts">
+        <mifosx-savings-account-table
+          [savingsAccountData]="clientAccountsData.savingsAccounts"
+        ></mifosx-savings-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Share Accounts" *ngIf="clientAccountsData && clientAccountsData.shareAccounts">
-      <mifosx-share-account-table [shareAccountData]="clientAccountsData.shareAccounts"></mifosx-share-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.shareAccounts) {
+      <mat-tab label="Share Accounts">
+        <mifosx-share-account-table [shareAccountData]="clientAccountsData.shareAccounts"></mifosx-share-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Group Members" *ngIf="clientData.groups && clientData.groups.length !== 0">
-      <mifosx-member-groups [memberGroupData]="clientData.groups"></mifosx-member-groups>
-    </mat-tab>
+    @if (clientData.groups && clientData.groups.length !== 0) {
+      <mat-tab label="Group Members">
+        <mifosx-member-groups [memberGroupData]="clientData.groups"></mifosx-member-groups>
+      </mat-tab>
+    }
   </mat-tab-group>
 </mat-card-content>