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

@@ -45,41 +45,41 @@
           {{ groupData.staffName }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="groupData.centerName">
-          {{ 'labels.inputs.Associated Center' | translate }}
-        </div>
+        @if (groupData.centerName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Center' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="groupData.centerName">
-          {{ groupData.centerName }}
-        </div>
+        @if (groupData.centerName) {
+          <div class="flex-50">
+            {{ groupData.centerName }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ 'labels.inputs.Next Meeting Date' | translate }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Next Meeting Date' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="flex-50">
+            {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ 'labels.inputs.Meeting Frequency' | translate }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Meeting Frequency' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ groupData.collectionMeetingCalendar.humanReadable }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable) {
+          <div class="flex-50">
+            {{ groupData.collectionMeetingCalendar.humanReadable }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Number of Clients' | translate }}
@@ -91,14 +91,18 @@
       </div>
     </mat-tab>
 
-    <mat-tab label="Loan Accounts" *ngIf="groupAccountsData && groupAccountsData.loanAccounts">
-      <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
-    </mat-tab>
+    @if (groupAccountsData && groupAccountsData.loanAccounts) {
+      <mat-tab label="Loan Accounts">
+        <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Savings Accounts" *ngIf="groupAccountsData && groupAccountsData.savingsAccounts">
-      <mifosx-savings-account-table
-        [savingsAccountData]="groupAccountsData.savingsAccounts"
-      ></mifosx-savings-account-table>
-    </mat-tab>
+    @if (groupAccountsData && groupAccountsData.savingsAccounts) {
+      <mat-tab label="Savings Accounts">
+        <mifosx-savings-account-table
+          [savingsAccountData]="groupAccountsData.savingsAccounts"
+        ></mifosx-savings-account-table>
+      </mat-tab>
+    }
   </mat-tab-group>
 </mat-card-content>