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/shares/shares-account-view/shares-account-view.component.html

@@ -35,9 +35,11 @@
                 <span class="m-r-10"
                   >{{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }} :</span
                 >{{ sharesAccountData.clientName || sharesAccountData.groupName }}
-                <span class="m-l-10" *ngIf="sharesAccountData.clientAccountNo">
-                  <mifosx-account-number accountNo="{{ sharesAccountData.clientAccountNo }}"></mifosx-account-number>
-                </span>
+                @if (sharesAccountData.clientAccountNo) {
+                  <span class="m-l-10">
+                    <mifosx-account-number accountNo="{{ sharesAccountData.clientAccountNo }}"></mifosx-account-number>
+                  </span>
+                }
               </span>
               <div>
                 <table class="account-overview">
@@ -46,13 +48,15 @@
                       <td>{{ 'labels.inputs.Current Market Price' | translate }} :</td>
                       <td>{{ sharesAccountData.currentMarketPrice | formatNumber }}</td>
                     </tr>
-                    <tr *ngIf="sharesAccountData.lockinPeriod">
-                      <td>{{ 'labels.inputs.Lockin Period' | translate }} :</td>
-                      <td>
-                        {{ sharesAccountData.lockinPeriod }}
-                        {{ sharesAccountData.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}
-                      </td>
-                    </tr>
+                    @if (sharesAccountData.lockinPeriod) {
+                      <tr>
+                        <td>{{ 'labels.inputs.Lockin Period' | translate }} :</td>
+                        <td>
+                          {{ sharesAccountData.lockinPeriod }}
+                          {{ sharesAccountData.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}
+                        </td>
+                      </tr>
+                    }
                   </tbody>
                 </table>
               </div>
@@ -60,17 +64,18 @@
 
             <span class="flex-auto"></span>
             <div class="flex-40">
-              <button
-                mat-icon-button
-                [matMenuTriggerFor]="accountMenu"
-                aria-label="Share account actions"
-                yPosition="below"
-                *ngIf="buttonConfig.singleButtons.length > 0"
-              >
-                <mat-icon matListIcon class="actions-menu">
-                  <fa-icon icon="bars" size="sm"></fa-icon>
-                </mat-icon>
-              </button>
+              @if (buttonConfig.singleButtons.length > 0) {
+                <button
+                  mat-icon-button
+                  [matMenuTriggerFor]="accountMenu"
+                  aria-label="Share account actions"
+                  yPosition="below"
+                >
+                  <mat-icon matListIcon class="actions-menu">
+                    <fa-icon icon="bars" size="sm"></fa-icon>
+                  </mat-icon>
+                </button>
+              }
             </div>
           </div>
         </mat-card-title>
@@ -78,25 +83,27 @@
     </mat-card-title-group>
 
     <mat-menu #accountMenu="matMenu">
-      <ng-container *ngFor="let item of buttonConfig.singleButtons">
+      @for (item of buttonConfig.singleButtons; track item) {
         <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
           <mat-icon matListIcon>
             <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
           </mat-icon>
           <span>{{ 'labels.menus.' + item.name | translate }}</span>
         </button>
-      </ng-container>
+      }
 
-      <ng-container *ngIf="buttonConfig.options.length">
+      @if (buttonConfig.options.length) {
         <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
         <mat-menu #More="matMenu">
-          <span *ngFor="let option of buttonConfig.options">
-            <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
-              {{ 'labels.menus.' + option.name | translate }}
-            </button>
-          </span>
+          @for (option of buttonConfig.options; track option) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                {{ 'labels.menus.' + option.name | translate }}
+              </button>
+            </span>
+          }
         </mat-menu>
-      </ng-container>
+      }
     </mat-menu>
   </mat-card-header>