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/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html

@@ -4,21 +4,31 @@
       <ng-container matColumnDef="entitymapping">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Mapping Between Entities' | translate }}</th>
         <td mat-cell *matCellDef="let mappingType" (click)="showFilters(mappingType.id)">
-          <span *ngIf="mappingType.mappingTypes === 'office_access_to_loan_products'">
-            {{ 'labels.inputs.Offices Loan Products' | translate }}
-          </span>
-          <span *ngIf="mappingType.mappingTypes === 'office_access_to_savings_products'">
-            {{ 'labels.inputs.Offices Savings Products' | translate }}
-          </span>
-          <span *ngIf="mappingType.mappingTypes === 'office_access_to_fees/charges'">
-            {{ 'labels.inputs.Offices Charges/Fees' | translate }}
-          </span>
-          <span *ngIf="mappingType.mappingTypes === 'role_access_to_loan_products'">
-            {{ 'labels.inputs.Roles Loan Products' | translate }}
-          </span>
-          <span *ngIf="mappingType.mappingTypes === 'role_access_to_savings_products'">
-            {{ 'labels.inputs.Roles Savings Products' | translate }}
-          </span>
+          @if (mappingType.mappingTypes === 'office_access_to_loan_products') {
+            <span>
+              {{ 'labels.inputs.Offices Loan Products' | translate }}
+            </span>
+          }
+          @if (mappingType.mappingTypes === 'office_access_to_savings_products') {
+            <span>
+              {{ 'labels.inputs.Offices Savings Products' | translate }}
+            </span>
+          }
+          @if (mappingType.mappingTypes === 'office_access_to_fees/charges') {
+            <span>
+              {{ 'labels.inputs.Offices Charges/Fees' | translate }}
+            </span>
+          }
+          @if (mappingType.mappingTypes === 'role_access_to_loan_products') {
+            <span>
+              {{ 'labels.inputs.Roles Loan Products' | translate }}
+            </span>
+          }
+          @if (mappingType.mappingTypes === 'role_access_to_savings_products') {
+            <span>
+              {{ 'labels.inputs.Roles Savings Products' | translate }}
+            </span>
+          }
         </td>
       </ng-container>
 
@@ -27,7 +37,7 @@
     </table>
 
     <!---------------- SHOW FILTERING OPTION  ----------->
-    <ng-container *ngIf="selectedMappingType > 0">
+    @if (selectedMappingType > 0) {
       <mat-card>
         <form [formGroup]="filterPreferenceForm" (ngSubmit)="showFilteredData()">
           <mat-card-title>
@@ -42,73 +52,71 @@
                   <mat-option [value]="0">
                     {{ 'labels.inputs.All' | translate }}
                   </mat-option>
-                  <mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
-                    {{ firstEntity.name }}
-                  </mat-option>
+                  @for (firstEntity of firstEntityData; track firstEntity) {
+                    <mat-option [value]="firstEntity.id">
+                      {{ firstEntity.name }}
+                    </mat-option>
+                  }
                 </mat-select>
-                <mat-error *ngIf="filterPreferenceForm.controls.mappingFirstParamId.hasError('required')">
-                  {{ firstMappingEntity | translateKey: 'inputs' }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
+                @if (filterPreferenceForm.controls.mappingFirstParamId.hasError('required')) {
+                  <mat-error>
+                    {{ firstMappingEntity | translateKey: 'inputs' }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
               </mat-form-field>
-
               <mat-form-field>
                 <mat-label>{{ secondMappingEntity | translateKey: 'text' }}</mat-label>
                 <mat-select required formControlName="mappingSecondParamId">
                   <mat-option [value]="0">
                     {{ 'labels.inputs.All' | translate }}
                   </mat-option>
-                  <mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
-                    {{ secondEntity.name }}
-                  </mat-option>
+                  @for (secondEntity of secondEntityData; track secondEntity) {
+                    <mat-option [value]="secondEntity.id">
+                      {{ secondEntity.name }}
+                    </mat-option>
+                  }
                 </mat-select>
-                <mat-error *ngIf="filterPreferenceForm.controls.mappingSecondParamId.hasError('required')">
-                  {{ secondMappingEntity | translateKey: 'text' }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
+                @if (filterPreferenceForm.controls.mappingSecondParamId.hasError('required')) {
+                  <mat-error>
+                    {{ secondMappingEntity | translateKey: 'text' }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
               </mat-form-field>
-
               <mat-card-actions class="layout-row align-center gap-5px responsive-column">
                 <button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">
                   {{ 'labels.buttons.Submit' | translate }}
                 </button>
-                <button
-                  *ngIf="hasClickedFilters"
-                  mat-raised-button
-                  color="primary"
-                  (click)="showAddScreen(selectedMappingType)"
-                >
-                  {{ 'labels.buttons.Add' | translate }}
-                </button>
+                @if (hasClickedFilters) {
+                  <button mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">
+                    {{ 'labels.buttons.Add' | translate }}
+                  </button>
+                }
               </mat-card-actions>
             </div>
           </mat-card-content>
         </form>
-
         <!----------------- DISPLAY THE MAPPING LIST DATA FOR SELECTED TYPE AND SELECTED ENTITIES -------------------->
-        <ng-container *ngIf="hasClickedFilters">
+        @if (hasClickedFilters) {
           <div>
             <table mat-table [dataSource]="entityMappingsListData">
               <ng-container matColumnDef="fromentity">
                 <th mat-header-cell *matHeaderCellDef>{{ firstMappingEntity | translateKey: 'inputs' }}</th>
                 <td mat-cell *matCellDef="let listdata">{{ listdata.fromEntity }}</td>
               </ng-container>
-
               <ng-container matColumnDef="toentity">
                 <th mat-header-cell *matHeaderCellDef>{{ secondMappingEntity | translateKey: 'text' }}</th>
                 <td mat-cell *matCellDef="let listdata">{{ listdata.toEntity }}</td>
               </ng-container>
-
               <ng-container matColumnDef="startdate">
                 <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
                 <td mat-cell *matCellDef="let listdata">{{ listdata.startDate | dateFormat }}</td>
               </ng-container>
-
               <ng-container matColumnDef="enddate">
                 <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.End Date' | translate }}</th>
                 <td mat-cell *matCellDef="let listdata">{{ listdata.endDate | dateFormat }}</td>
               </ng-container>
-
               <ng-container matColumnDef="edit">
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let listdata">
@@ -125,7 +133,6 @@
                   </button>
                 </td>
               </ng-container>
-
               <ng-container matColumnDef="delete">
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let listdata">
@@ -142,14 +149,13 @@
                   </button>
                 </td>
               </ng-container>
-
               <tr mat-header-row *matHeaderRowDef="entityMappingListColumns"></tr>
               <tr mat-row *matRowDef="let row; columns: entityMappingListColumns" class="select-row"></tr>
             </table>
             <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
           </div>
-        </ng-container>
+        }
       </mat-card>
-    </ng-container>
+    }
   </div>
 </div>

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -66,6 +66,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EntityToEntityMappingComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private dateUtils = inject(Dates);
+  private dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+  private translateService = inject(TranslateService);
+
   /** Stores entity to entity mapping data */
   entityMappings: string[] = [];
   /** Stores Id of selected mapping type */
@@ -123,15 +131,7 @@ export class EntityToEntityMappingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private dateUtils: Dates,
-    private dialog: MatDialog,
-    private settingsService: SettingsService,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { entityMappings: any }) => {
       this.entityMappings = data.entityMappings;
     });
@@ -290,7 +290,6 @@ export class EntityToEntityMappingComponent implements OnInit {
         type: 'date',
         required: false
       })
-
     ];
     const data = {
       title:
@@ -345,7 +344,6 @@ export class EntityToEntityMappingComponent implements OnInit {
         type: 'date',
         required: false
       })
-
     ];
     const data = {
       title:

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { SystemService } from '../system.service';
  */
 @Injectable()
 export class EntityToEntityMappingResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Mapping data.