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/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,15 +1,16 @@
 <div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
-    <button
-      mat-raised-button
-      color="primary"
-      *ngIf="glAccount.usage.value === 'HEADER'"
-      [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
-      [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
-    >
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Subledger Account' | translate }}
-    </button>
+    @if (glAccount.usage.value === 'HEADER') {
+      <button
+        mat-raised-button
+        color="primary"
+        [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
+        [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Subledger Account' | translate }}
+      </button>
+    }
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
@@ -20,17 +21,21 @@
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Disable' | translate }}
-    </button>
+    @if (!glAccount.disabled) {
+      <button mat-raised-button color="warn" (click)="changeGlAccountState()">
+        <fa-icon icon="lock" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Disable' | translate }}
+      </button>
+    }
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Enable' | translate }}
-    </button>
+    @if (glAccount.disabled) {
+      <button mat-raised-button color="accent" (click)="changeGlAccountState()">
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Enable' | translate }}
+      </button>
+    }
   </span>
 
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
@@ -54,22 +59,26 @@
           <div class="value">{{ glAccount.glCode }}</div>
         </div>
 
-        <div class="content-row" *ngIf="glAccount.parent">
-          <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
-          <div class="value">
-            <a
-              class="tab-link"
-              [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
-            >
-              <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
-            </a>
+        @if (glAccount.parent) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
+            <div class="value">
+              <a
+                class="tab-link"
+                [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
+              >
+                <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
+              </a>
+            </div>
           </div>
-        </div>
+        }
 
-        <div class="content-row" *ngIf="glAccount.tagId.id">
-          <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
-          <div class="value">{{ glAccount.tagId.name }}</div>
-        </div>
+        @if (glAccount.tagId.id) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
+            <div class="value">{{ glAccount.tagId.name }}</div>
+          </div>
+        }
 
         <div class="content-row">
           <div class="label">{{ 'labels.inputs.Account Usage' | translate }}</div>
@@ -81,10 +90,12 @@
           <div class="value">{{ glAccount.manualEntriesAllowed | yesNo }}</div>
         </div>
 
-        <div class="content-row" *ngIf="glAccount.description">
-          <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
-          <div class="value">{{ glAccount.description }}</div>
-        </div>
+        @if (glAccount.description) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
+            <div class="value">{{ glAccount.description }}</div>
+          </div>
+        }
       </div>
     </mat-card-content>