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/templates/common-resolvers/create-template.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 { TemplatesService } from '../templates.service';
  */
 @Injectable()
 export class CreateTemplateResolver {
-  /**
-   * @param {TemplatesService} templatesService Templates service.
-   */
-  constructor(private templatesService: TemplatesService) {}
+  private templatesService = inject(TemplatesService);
 
   /**
    * Returns the template data.

src/app/templates/common-resolvers/edit-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { TemplatesService } from '../templates.service';
  */
 @Injectable()
 export class EditTemplateResolver {
-  /**
-   * @param {TemplatesService} templatesService Templates service.
-   */
-  constructor(private templatesService: TemplatesService) {}
+  private templatesService = inject(TemplatesService);
 
   /**
    * Returns the template data.

src/app/templates/common-resolvers/template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { TemplatesService } from '../templates.service';
  */
 @Injectable()
 export class TemplateResolver {
-  /**
-   * @param {TemplatesService} templatesService Templates service.
-   */
-  constructor(private templatesService: TemplatesService) {}
+  private templatesService = inject(TemplatesService);
 
   /**
    * Returns the Template data.

src/app/templates/common-resolvers/templates.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 { TemplatesService } from '../templates.service';
  */
 @Injectable()
 export class TemplatesResolver {
-  /**
-   * @param {TemplatesService} templatesService Templates service.
-   */
-  constructor(private templatesService: TemplatesService) {}
+  private templatesService = inject(TemplatesService);
 
   /**
    * Returns the templates data.

src/app/templates/create-edit-template/create-edit-template.component.html

@@ -6,36 +6,46 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
-              <mat-option *ngFor="let entity of templateData.entities; trackBy: trackByEntityId" [value]="entity.id">
-                {{ entity.name }}
-              </mat-option>
+              @for (entity of templateData.entities; track trackByEntityId($index, entity)) {
+                <mat-option [value]="entity.id">
+                  {{ entity.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="templateForm.controls.entity.hasError('required')">
-              {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (templateForm.controls.entity.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
-              <mat-option *ngFor="let type of templateData.types; trackBy: trackByTypeId" [value]="type.id">
-                {{ type.name }}
-              </mat-option>
+              @for (type of templateData.types; track trackByTypeId($index, type)) {
+                <mat-option [value]="type.id">
+                  {{ type.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="templateForm.controls.type.hasError('required')">
-              {{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (templateForm.controls.type.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="templateForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (templateForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>
@@ -48,35 +58,32 @@
         </button>
       </div>
 
-      <ng-container role="mappers" *ngIf="showAdvanceOptions">
-        <div
-          *ngFor="let mapper of mappers; index as i; trackBy: trackByMapperIndex"
-          class="mapper-row layout-row gap-2percent"
-        >
-          <mat-form-field class="flex-48">
-            <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
-            <input matInput [formControl]="mapper.mapperskey" />
-          </mat-form-field>
-
-          <mat-form-field class="flex-fill flex-38">
-            <mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
-            <input matInput [formControl]="mapper.mappersvalue" />
-          </mat-form-field>
-
-          <button *ngIf="i === 0" class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-          </button>
-          <button
-            *ngIf="!(i === 0)"
-            class="mapper-button flex-9"
-            mat-raised-button
-            color="primary"
-            (click)="removeMapper(i)"
-          >
-            <fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
-          </button>
-        </div>
-      </ng-container>
+      @if (showAdvanceOptions) {
+        <ng-container role="mappers">
+          @for (mapper of mappers; track trackByMapperIndex(i, mapper); let i = $index) {
+            <div class="mapper-row layout-row gap-2percent">
+              <mat-form-field class="flex-48">
+                <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
+                <input matInput [formControl]="mapper.mapperskey" />
+              </mat-form-field>
+              <mat-form-field class="flex-fill flex-38">
+                <mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
+                <input matInput [formControl]="mapper.mappersvalue" />
+              </mat-form-field>
+              @if (i === 0) {
+                <button class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
+                  <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+                </button>
+              }
+              @if (!(i === 0)) {
+                <button class="mapper-button flex-9" mat-raised-button color="primary" (click)="removeMapper(i)">
+                  <fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
+                </button>
+              }
+            </div>
+          }
+        </ng-container>
+      }
     </mat-card-content>
 
     <mat-card-content>
@@ -98,65 +105,56 @@
     <mat-card-content>
       <div role="template-parameters">
         <mat-accordion>
-          <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                {{ 'labels.inputs.Client Parameters' | translate }}
-              </mat-panel-title>
-            </mat-expansion-panel-header>
+          @if (templateForm.controls.entity.value === 0) {
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{ 'labels.inputs.Client Parameters' | translate }}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="layout-row-wrap layout-xs-column layout-align-center">
+                @for (label of clientParameterLabels; track trackByLabel($index, label)) {
+                  <button mat-stroked-button color="primary" class="parameter" (click)="addText(label)">
+                    {{ label }}
+                  </button>
+                }
+              </div>
+            </mat-expansion-panel>
+          }
 
-            <div class="layout-row-wrap layout-xs-column layout-align-center">
-              <button
-                mat-stroked-button
-                color="primary"
-                class="parameter"
-                *ngFor="let label of clientParameterLabels; trackBy: trackByLabel"
-                (click)="addText(label)"
-              >
-                {{ label }}
-              </button>
-            </div>
-          </mat-expansion-panel>
+          @if (templateForm.controls.entity.value === 1) {
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{ 'labels.inputs.Loan Parameters' | translate }}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="layout-row-wrap layout-xs-column layout-align-center">
+                @for (label of loanParameterLabels; track trackByLabel($index, label)) {
+                  <button mat-stroked-button color="primary" class="parameter" (click)="addText(label)">
+                    {{ label }}
+                  </button>
+                }
+              </div>
+            </mat-expansion-panel>
+          }
 
-          <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                {{ 'labels.inputs.Loan Parameters' | translate }}
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-
-            <div class="layout-row-wrap layout-xs-column layout-align-center">
-              <button
-                mat-stroked-button
-                color="primary"
-                class="parameter"
-                *ngFor="let label of loanParameterLabels; trackBy: trackByLabel"
-                (click)="addText(label)"
-              >
-                {{ label }}
-              </button>
-            </div>
-          </mat-expansion-panel>
-
-          <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                {{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-
-            <div class="layout-row-wrap layout-xs-column layout-align-center">
-              <button
-                mat-stroked-button
-                color="primary"
-                class="parameter"
-                *ngFor="let label of repaymentParameterLabels; trackBy: trackByLabel"
-                (click)="addText(label)"
-              >
-                {{ label }}
-              </button>
-            </div>
-          </mat-expansion-panel>
+          @if (templateForm.controls.entity.value === 1) {
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="layout-row-wrap layout-xs-column layout-align-center">
+                @for (label of repaymentParameterLabels; track trackByLabel($index, label)) {
+                  <button mat-stroked-button color="primary" class="parameter" (click)="addText(label)">
+                    {{ label }}
+                  </button>
+                }
+              </div>
+            </mat-expansion-panel>
+          }
         </mat-accordion>
       </div>
     </mat-card-content>

src/app/templates/create-edit-template/create-edit-template.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -48,6 +48,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateEditComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private templateService = inject(TemplatesService);
+
   /** TinyMCE instance configuration */
   tinymceConfig = {
     base_url: 'assets/tinymce',
@@ -91,12 +96,7 @@ export class CreateEditComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {TemplateService} templateService Templates Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private templateService: TemplatesService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { templateData: any; mode: 'create' | 'edit' }) => {
       this.templateData = data.templateData;
       this.mode = data.mode;

src/app/templates/templates-routing.module.ts

@@ -58,7 +58,6 @@ const routes: Routes = [
       ]
     }
   ])
-
 ];
 
 /**

src/app/templates/templates.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -45,6 +45,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class TemplatesComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Templates data. */
   templatesData: any;
   /** Columns to be displayed in templates table. */
@@ -65,7 +67,7 @@ export class TemplatesComponent implements OnInit {
    * Retrieves the templates data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { templates: any }) => {
       this.templatesData = data.templates;
     });

src/app/templates/templates.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -12,10 +12,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class TemplatesService {
-  /**
-   * @param {HttpClient} http Http Client to send requests.
-   */
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @returns {Observable<any>} Templates data

src/app/templates/view-template/view-template.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -24,6 +24,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewTemplateComponent {
+  private route = inject(ActivatedRoute);
+  private templatesService = inject(TemplatesService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+
   /** Template Data */
   templateData: any;
 
@@ -34,12 +39,7 @@ export class ViewTemplateComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private templatesService: TemplatesService,
-    private router: Router,
-    private dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { template: any }) => {
       this.templateData = data.template;
     });