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/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -10,47 +10,52 @@
         </button>
       </span>
       <ng-container *mifosxHasPermission="'DELETE_' + datatableName">
-        <span *ngIf="isSelected">
-          <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Delete Selected' | translate }}
-          </button>
-        </span>
+        @if (isSelected) {
+          <span>
+            <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Delete Selected' | translate }}
+            </button>
+          </span>
+        }
       </ng-container>
       <ng-container *mifosxHasPermission="'DELETE_' + datatableName">
-        <span *ngIf="datatableData.length > 0">
-          <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Delete All' | translate }}
-          </button>
-        </span>
+        @if (datatableData.length > 0) {
+          <span>
+            <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Delete All' | translate }}
+            </button>
+          </span>
+        }
       </ng-container>
     </div>
   </div>
 
   <div class="m-t-10">
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-      <ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
-        <ng-container *ngIf="i === 0">
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let data">
-            <mat-checkbox
-              class="center"
-              (click)="$event.stopPropagation()"
-              (change)="$event ? itemToggle(data) : null"
-              [checked]="selection.isSelected(data)"
-            >
-            </mat-checkbox>
-          </td>
+      @for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
+        <ng-container [matColumnDef]="datatableColumn">
+          @if (i === 0) {
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let data">
+              <mat-checkbox
+                class="center"
+                (click)="$event.stopPropagation()"
+                (change)="$event ? itemToggle(data) : null"
+                [checked]="selection.isSelected(data)"
+              >
+              </mat-checkbox>
+            </td>
+          }
+          @if (i > 0) {
+            <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
+            <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
+              {{ formatValue(data, datatableColumn) }}
+            </td>
+          }
         </ng-container>
-
-        <ng-container *ngIf="i > 0">
-          <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
-          <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-            {{ formatValue(data, datatableColumn) }}
-          </td>
-        </ng-container>
-      </ng-container>
+      }
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: datatableColumns"></tr>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { DecimalPipe, NgIf, NgFor, NgClass } from '@angular/common';
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { DecimalPipe, NgClass } from '@angular/common';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, inject } from '@angular/core';
 import { MatCheckboxChange as MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -51,6 +51,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private systemService = inject(SystemService);
+  private settingsService = inject(SettingsService);
+  private dialog = inject(MatDialog);
+  private datatables = inject(Datatables);
+  private dateFormat = inject(DateFormatPipe);
+  private dateTimeFormat = inject(DatetimeFormatPipe);
+  private numberFormat = inject(DecimalPipe);
+
   SELECT_NAME_FIELD = 'select';
   /** Data Object */
   @Input() dataObject: any;
@@ -74,27 +84,6 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   /** Data Table Reference */
   @ViewChild('dataTable') dataTableRef: MatTable<Element>;
 
-  /**
-   * Fetches center Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SystemService} systemService system Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private systemService: SystemService,
-    private settingsService: SettingsService,
-    private dialog: MatDialog,
-    private datatables: Datatables,
-    private dateFormat: DateFormatPipe,
-    private dateTimeFormat: DatetimeFormatPipe,
-    private numberFormat: DecimalPipe
-  ) {}
-
   /**
    * Fetches data table name from route params.
    * subscription is required due to asynchronicity.

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -1,70 +1,92 @@
 <div class="tab-container mat-typography">
   <h3>{{ datatableName }}</h3>
   <div class="layout-row align-end m-b-20">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-    </button>
+    @if (!dataObject.data[0]) {
+      <button mat-raised-button color="primary" (click)="add()">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+      </button>
+    }
+    @if (dataObject.data[0]) {
+      <button mat-raised-button color="primary" (click)="edit()">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+      </button>
+    }
+    @if (dataObject.data[0]) {
+      <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+      </button>
+    }
   </div>
 
   <mat-divider></mat-divider>
 
-  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
-    <div
-      class="flex-fill"
-      *ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
-      [ngClass]="setAttributeClass(columnHeader.columnName)"
-    >
-      <div class="mat-body-strong left flex-40">
-        {{ columnHeader.columnDisplayName }}
-        {{ getInputName(columnHeader.columnName) }}
-      </div>
-
-      <div [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right flex-60">
-        <span *ngSwitchCase="'DATE'">
-          {{ dataObject.data[0].row[i] | dateFormat }}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{ dataObject.data[0].row[i] | datetimeFormat }}
-        </span>
-        <span *ngSwitchCase="'INTEGER'">
-          {{ dataObject.data[0].row[i] }}
-        </span>
-        <span *ngSwitchCase="'DECIMAL'">
-          {{ dataObject.data[0].row[i] | formatNumber }}
-        </span>
-        <span *ngSwitchCase="'TEXT'" class="long-text">
-          {{ dataObject.data[0].row[i] }}
-        </span>
-        <textarea
-          *ngSwitchCase="'JSON'"
-          cdkTextareaAutosize="true"
-          cdkAutosizeMaxRows="20"
-          cdkAutosizeMinRows="1"
-          class="json-textarea"
-          [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
-        >
-        </textarea>
-        <span *ngSwitchDefault>
-          <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button
-              mat-icon-button
-              matTooltip="{{ 'tooltips.View Link' | translate }}"
-              (click)="openSite(dataObject.data[0].row[i])"
-              matTooltipPosition="right"
-              class="small-icon"
-            >
-              <fa-icon icon="eye" size="lg"></fa-icon>
-            </button>
-          </span>
-          {{ dataObject.data[0].row[i] }}
-        </span>
-      </div>
+  @if (dataObject.data.length > 0) {
+    <div class="m-t-10">
+      @for (columnHeader of dataObject.columnHeaders; track columnHeader; let i = $index) {
+        <div class="flex-fill" [ngClass]="setAttributeClass(columnHeader.columnName)">
+          <div class="mat-body-strong left flex-40">
+            {{ columnHeader.columnDisplayName }}
+            {{ getInputName(columnHeader.columnName) }}
+          </div>
+          <div class="right flex-60">
+            @switch (getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)) {
+              @case ('DATE') {
+                <span>
+                  {{ dataObject.data[0].row[i] | dateFormat }}
+                </span>
+              }
+              @case ('DATETIME') {
+                <span>
+                  {{ dataObject.data[0].row[i] | datetimeFormat }}
+                </span>
+              }
+              @case ('INTEGER') {
+                <span>
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+              @case ('DECIMAL') {
+                <span>
+                  {{ dataObject.data[0].row[i] | formatNumber }}
+                </span>
+              }
+              @case ('TEXT') {
+                <span class="long-text">
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+              @case ('JSON') {
+                <textarea
+                  cdkTextareaAutosize="true"
+                  cdkAutosizeMaxRows="20"
+                  cdkAutosizeMinRows="1"
+                  class="json-textarea"
+                  [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
+                >
+                </textarea>
+              }
+              @default {
+                <span>
+                  @if (isValidUrl(dataObject.data[0].row[i])) {
+                    <span class="m-r-5">
+                      <button
+                        mat-icon-button
+                        matTooltip="{{ 'tooltips.View Link' | translate }}"
+                        (click)="openSite(dataObject.data[0].row[i])"
+                        matTooltipPosition="right"
+                        class="small-icon"
+                      >
+                        <fa-icon icon="eye" size="lg"></fa-icon>
+                      </button>
+                    </span>
+                  }
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+            }
+          </div>
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { Datatables } from 'app/core/utils/datatables';
@@ -8,7 +8,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SystemService } from 'app/system/system.service';
-import { NgIf, NgFor, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
@@ -29,10 +29,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FaIconComponent,
     MatDivider,
     NgClass,
-    NgSwitch,
-    NgSwitchCase,
     CdkTextareaAutosize,
-    NgSwitchDefault,
     MatIconButton,
     MatTooltip,
     DateFormatPipe,
@@ -42,27 +39,18 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableSingleRowComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+  private datatables = inject(Datatables);
+  private systemService = inject(SystemService);
+
   @Input() dataObject: any;
   @Input() entityId: string;
   @Input() entityType: string;
   datatableName: string;
 
-  /**
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SystemService} systemService System Service.
-   * @param {SettingsService} settingsService Settings Service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private dialog: MatDialog,
-    private settingsService: SettingsService,
-    private datatables: Datatables,
-    private systemService: SystemService
-  ) {}
-
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html

@@ -1,14 +1,16 @@
 <div>
-  <mifosx-datatable-multi-row
-    *ngIf="multiRowDatatableFlag"
-    [entityType]="entityType"
-    [entityId]="entityId"
-    [dataObject]="entityDatatable"
-  ></mifosx-datatable-multi-row>
-  <mifosx-datatable-single-row
-    *ngIf="!multiRowDatatableFlag"
-    [entityType]="entityType"
-    [entityId]="entityId"
-    [dataObject]="entityDatatable"
-  ></mifosx-datatable-single-row>
+  @if (multiRowDatatableFlag) {
+    <mifosx-datatable-multi-row
+      [entityType]="entityType"
+      [entityId]="entityId"
+      [dataObject]="entityDatatable"
+    ></mifosx-datatable-multi-row>
+  }
+  @if (!multiRowDatatableFlag) {
+    <mifosx-datatable-single-row
+      [entityType]="entityType"
+      [entityId]="entityId"
+      [dataObject]="entityDatatable"
+    ></mifosx-datatable-single-row>
+  }
 </div>