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

@@ -1,12 +1,12 @@
 <!-- The viewport is divided into two parts having max-width 70% and 30% -->
 <div class="layout-row">
   <!--
-    Content in 70%: (TODO: Allow customization by organization)
-      Cover Image
-      Organization/Application Name
-      Organization/Application Description
+  Content in 70%: (TODO: Allow customization by organization)
+  Cover Image
+  Organization/Application Name
+  Organization/Application Description
 
-    This content will be hidden for smaller screens.
+  This content will be hidden for smaller screens.
   -->
 
   <div class="flex-70 layout-column align-center align-items-center hide-lt-sm cover">
@@ -30,20 +30,22 @@
   </div>
 
   <!--
-    Content in 30%: (TODO: Allow customization of Name, Logo and Contact Information by organization)
+      Content in 30%: (TODO: Allow customization of Name, Logo and Contact Information by organization)
       Language Selector
       Organization/Application Name with Logo
       Form
       Contact Information/Resources
       Footer
-  -->
+      -->
 
   <div class="layout-column flex-gt-sm-30 login-container">
     <!-- Language Selector to the extreme right -->
     <div class="layout-row-reverse">
       <mifosx-language-selector class="p-t-10 p-r-10 width-40"></mifosx-language-selector>
       <mifosx-theme-toggle class="p-t-10"></mifosx-theme-toggle>
-      <mifosx-server-selector class="p-t-10" *ngIf="allowServerSwitch()"></mifosx-server-selector>
+      @if (allowServerSwitch()) {
+        <mifosx-server-selector class="p-t-10"></mifosx-server-selector>
+      }
     </div>
 
     <!-- Logo with Organization Name -->
@@ -54,19 +56,27 @@
     <!-- Form Section -->
     <div class="layout-column align-center-center">
       <!-- Tenant Identifier Name -->
-      <mifosx-tenant-selector *ngIf="displayTenantSelector()"></mifosx-tenant-selector>
+      @if (displayTenantSelector()) {
+        <mifosx-tenant-selector></mifosx-tenant-selector>
+      }
 
       <!--
-        Type of Form:
+          Type of Form:
           Login
           Reset Password
           Two Factor Authentication
-      -->
-      <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>
+          -->
+      @if (!resetPassword && !twoFactorAuthenticationRequired) {
+        <mifosx-login-form></mifosx-login-form>
+      }
 
       <div class="layout-row">
-        <mifosx-reset-password *ngIf="resetPassword"></mifosx-reset-password>
-        <mifosx-two-factor-authentication *ngIf="twoFactorAuthenticationRequired"></mifosx-two-factor-authentication>
+        @if (resetPassword) {
+          <mifosx-reset-password></mifosx-reset-password>
+        }
+        @if (twoFactorAuthenticationRequired) {
+          <mifosx-two-factor-authentication></mifosx-two-factor-authentication>
+        }
       </div>
     </div>