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/manage-hooks/view-hook/hook.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 { SystemService } from '../../system.service';
  */
 @Injectable()
 export class HookResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the manage hooks data.

src/app/system/manage-hooks/view-hook/view-hook.component.html

@@ -41,62 +41,77 @@
         <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Events' | translate }}:</div>
 
         <div class="flex-50">
-          <mat-label *ngFor="let event of hookData.events">
-            {{ event.actionName + '  -  ' + event.entityName }}
-
-            <br />
-          </mat-label>
+          @for (event of hookData.events; track event) {
+            <mat-label>
+              {{ event.actionName + '  -  ' + event.entityName }}
+              <br />
+            </mat-label>
+          }
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'Web'">
-          {{ 'labels.inputs.Content Type' | translate }}:
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Content Type' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'Web'">
-          {{ hookData.config[0].fieldValue }}
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50">
+            {{ hookData.config[0].fieldValue }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Payload URL' | translate }}:</div>
 
-        <div class="flex-50" *ngIf="hookData.name === 'Web'">
-          {{ hookData.config[1].fieldValue }}
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50">
+            {{ hookData.config[1].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[0].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[0].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.Phone Number' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Phone Number' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[1].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[1].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[2].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[2].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider Account ID' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider Account ID' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[3].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[3].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider Token' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider Token' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[4].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[4].fieldValue }}
+          </div>
+        }
       </div>
     </mat-card-content>
   </mat-card>

src/app/system/manage-hooks/view-hook/view-hook.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewHookComponent {
+  private route = inject(ActivatedRoute);
+  private dialog = inject(MatDialog);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private translateService = inject(TranslateService);
+
   /** Hook Data. */
   hookData: any;
 
@@ -38,13 +44,7 @@ export class ViewHookComponent {
    * @param {Router} router Router for navigation.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private dialog: MatDialog,
-    private systemService: SystemService,
-    private router: Router,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hook: any }) => {
       this.hookData = data.hook;
     });