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/account-number-preferences/account-number-preferences.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 AccountNumberPreferencesComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Account Number Preferences data. */
   accountNumberPreferencesData: any;
   /** Columns to be displayed in account number preferences table. */
@@ -61,7 +63,7 @@ export class AccountNumberPreferencesComponent implements OnInit {
    * Retrieves the account number preferences data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { accountNumberPreferences: any }) => {
       this.accountNumberPreferencesData = data.accountNumberPreferences;
     });

src/app/system/account-number-preferences/account-number-preferences.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 AccountNumberPreferencesResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Account Number Preferences data.

src/app/system/account-number-preferences/create-account-number-preference/account-number-preferences-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 { SystemService } from '../../system.service';
  */
 @Injectable()
 export class AccountNumberPreferencesTemplateResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Account Number Preferences Template data.

src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html

@@ -6,25 +6,28 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="accountType">
-              <mat-option
-                *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions"
-                [value]="accountType.id"
-              >
-                {{ accountType.value | translateKey: 'catalogs' }}
-              </mat-option>
+              @for (accountType of accountNumberPreferencesTemplateData.accountTypeOptions; track accountType) {
+                <mat-option [value]="accountType.id">
+                  {{ accountType.value | translateKey: 'catalogs' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (accountNumberPreferenceForm.controls.accountType.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Prefix Field' | translate }}</mat-label>
             <mat-select formControlName="prefixType">
-              <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
-                {{ prefixType.value }}
-              </mat-option>
+              @for (prefixType of prefixTypeData; track prefixType) {
+                <mat-option [value]="prefixType.id">
+                  {{ prefixType.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>

src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateAccountNumberPreferenceComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Account Number Preferences Form */
   accountNumberPreferenceForm: UntypedFormGroup;
   /** Account Number Preferences Template Data */
@@ -33,12 +38,7 @@ export class CreateAccountNumberPreferenceComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { accountNumberPreferencesTemplate: any }) => {
       this.accountNumberPreferencesTemplateData = data.accountNumberPreferencesTemplate;
     });

src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html

@@ -6,25 +6,28 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="accountType">
-              <mat-option
-                *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions"
-                [value]="accountType.id"
-              >
-                {{ accountType.value | translateKey: 'catalogs' }}
-              </mat-option>
+              @for (accountType of accountNumberPreferencesTemplateData.accountTypeOptions; track accountType) {
+                <mat-option [value]="accountType.id">
+                  {{ accountType.value | translateKey: 'catalogs' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (accountNumberPreferenceForm.controls.accountType.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Prefix Field' | translate }}</mat-label>
             <mat-select formControlName="prefixType">
-              <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
-                {{ prefixType.value }}
-              </mat-option>
+              @for (prefixType of prefixTypeData; track prefixType) {
+                <mat-option [value]="prefixType.id">
+                  {{ prefixType.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>

src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditAccountNumberPreferenceComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+
   /** Account Number Preference Form */
   accountNumberPreferenceForm: UntypedFormGroup;
   /** Account Number Preference Data */
@@ -35,12 +40,7 @@ export class EditAccountNumberPreferenceComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { accountNumberPreference: any; accountNumberPreferencesTemplate: any }) => {
       this.accountNumberPreferenceData = data.accountNumberPreference;
       this.accountNumberPreferencesTemplateData = data.accountNumberPreferencesTemplate;

src/app/system/account-number-preferences/view-account-number-preference/account-number-preference.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 AccountNumberPreferenceResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Account Number Preference data.

src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html

@@ -22,13 +22,17 @@
           {{ accountNumberPreferenceData.accountType.value | translateKey: 'catalogs' }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="accountNumberPreferenceData.prefixType">
-          {{ 'labels.inputs.Prefix Type' | translate }}
-        </div>
+        @if (accountNumberPreferenceData.prefixType) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Prefix Type' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="accountNumberPreferenceData.prefixType">
-          {{ accountNumberPreferenceData.prefixType.value }}
-        </div>
+        @if (accountNumberPreferenceData.prefixType) {
+          <div class="flex-50">
+            {{ accountNumberPreferenceData.prefixType.value }}
+          </div>
+        }
       </div>
     </mat-card-content>
   </mat-card>

src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.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';
 
@@ -25,6 +25,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewAccountNumberPreferenceComponent {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Account Number Preference Data */
   accountNumberPreferenceData: any;
 
@@ -36,13 +42,7 @@ export class ViewAccountNumberPreferenceComponent {
    * @param {MatDialog} dialog Dialog reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { accountNumberPreference: any }) => {
       this.accountNumberPreferenceData = data.accountNumberPreference;
     });

src/app/system/audit-trails/audit-trail-search-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 { SystemService } from '../system.service';
  */
 @Injectable()
 export class AuditTrailSearchTemplateResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Audit Trail Search Template data.

src/app/system/audit-trails/audit-trails.component.html

@@ -14,12 +14,11 @@
   <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
     <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
-      <mat-option
-        *ngFor="let processingResult of auditTrailSearchTemplateData.processingResults"
-        [value]="processingResult.id"
-      >
-        {{ processingResult.processingResult }}
-      </mat-option>
+      @for (processingResult of auditTrailSearchTemplateData.processingResults; track processingResult) {
+        <mat-option [value]="processingResult.id">
+          {{ processingResult.processingResult }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -52,7 +51,7 @@
         [max]="maxDate"
         [matDatepicker]="fromDatePicker"
         [formControl]="fromDate"
-        placeholder="YYYY-MM-DD"
+        placeholder="yyyy-MM-dd"
       />
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
@@ -73,7 +72,7 @@
         [max]="maxDate"
         [matDatepicker]="toDatePicker"
         [formControl]="toDate"
-        placeholder="YYYY-MM-DD"
+        placeholder="yyyy-MM-dd"
       />
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
@@ -94,7 +93,7 @@
         [max]="maxDate"
         [matDatepicker]="checkedFromDatePicker"
         [formControl]="checkedFromDate"
-        placeholder="YYYY-MM-DD"
+        placeholder="yyyy-MM-dd"
       />
       <mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #checkedFromDatePicker></mat-datepicker>
@@ -115,7 +114,7 @@
         [max]="maxDate"
         [matDatepicker]="checkedToDatePicker"
         [formControl]="checkedToDate"
-        placeholder="YYYY-MM-DD"
+        placeholder="yyyy-MM-dd"
       />
       <mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #checkedToDatePicker></mat-datepicker>
@@ -130,98 +129,100 @@
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #userNameAutocomplete="matAutocomplete" [displayWith]="displayUserName">
-  <mat-option *ngFor="let user of filteredUserData | async" [value]="{ id: user.id, name: user.username }">
-    {{ user.username }}
-  </mat-option>
+  @for (user of filteredUserData | async; track user) {
+    <mat-option [value]="{ id: user.id, name: user.username }">
+      {{ user.username }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #actionNameAutocomplete="matAutocomplete" [displayWith]="displayActionName">
-  <mat-option *ngFor="let action of filteredActionData | async" [value]="action">
-    {{ action }}
-  </mat-option>
+  @for (action of filteredActionData | async; track action) {
+    <mat-option [value]="action">
+      {{ action }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #entityNameAutocomplete="matAutocomplete" [displayWith]="displayEntityName">
-  <mat-option *ngFor="let entity of filteredEntityData | async" [value]="entity">
-    {{ entity }}
-  </mat-option>
+  @for (entity of filteredEntityData | async; track entity) {
+    <mat-option [value]="entity">
+      {{ entity }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #checkerAutocomplete="matAutocomplete" [displayWith]="displayUserName">
-  <mat-option *ngFor="let user of filteredCheckerData | async" [value]="{ id: user.id, name: user.username }">
-    {{ user.username }}
-  </mat-option>
+  @for (user of filteredCheckerData | async; track user) {
+    <mat-option [value]="{ id: user.id, name: user.username }">
+      {{ user.username }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <div class="container mat-elevation-z8 table-container">
-  <div *ngIf="isLoading">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-  </div>
-  <table *ngIf="!isLoading" mat-table [dataSource]="dataSource" matSort>
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
-    </ng-container>
+  @if (isLoading) {
+    <div>
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  }
+  @if (!isLoading) {
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
+      </ng-container>
+      <ng-container matColumnDef="resourceId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Resource ID' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.resourceId }}</td>
+      </ng-container>
+      <ng-container matColumnDef="processingResult">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.processingResult }}</td>
+      </ng-container>
+      <ng-container matColumnDef="maker">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made By' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.maker }}</td>
+      </ng-container>
+      <ng-container matColumnDef="actionName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Action' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.actionName }}</td>
+      </ng-container>
+      <ng-container matColumnDef="entityName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.entityName }}</td>
+      </ng-container>
+      <ng-container matColumnDef="officeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.officeName }}</td>
+      </ng-container>
+      <ng-container matColumnDef="madeOnDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made Date' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.madeOnDate | datetimeFormat }}</td>
+      </ng-container>
+      <ng-container matColumnDef="checker">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checker' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checker }}</td>
+      </ng-container>
+      <ng-container matColumnDef="checkedOnDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checked Date' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checkedOnDate | datetimeFormat }}</td>
+      </ng-container>
+      <ng-container matColumnDef="clientIp">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Ip' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.ip }}</td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+    </table>
+  }
 
-    <ng-container matColumnDef="resourceId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Resource ID' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.resourceId }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="processingResult">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.processingResult }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="maker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made By' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.maker }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="actionName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Action' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.actionName }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="entityName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.entityName }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.officeName }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="madeOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made Date' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.madeOnDate | datetimeFormat }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="checker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checker' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checker }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="checkedOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checked Date' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checkedOnDate | datetimeFormat }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="clientIp">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Ip' | translate }}</th>
-      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.ip }}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
-  </table>
-
-  <mat-paginator
-    *ngIf="!isLoading"
-    [length]="dataSource?.records$ | async"
-    [pageSize]="10"
-    [pageSizeOptions]="[10, 25, 50, 100]"
-    showFirstLastButtons
-  ></mat-paginator>
+  @if (!isLoading) {
+    <mat-paginator
+      [length]="dataSource?.records$ | async"
+      [pageSize]="10"
+      [pageSizeOptions]="[10, 25, 50, 100]"
+      showFirstLastButtons
+    ></mat-paginator>
+  }
 </div>

src/app/system/audit-trails/audit-trails.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -17,7 +17,7 @@ import { merge } from 'rxjs';
 import { tap, debounceTime, distinctUntilChanged, startWith, map } from 'rxjs/operators';
 import { Dates } from 'app/core/utils/dates';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { NgFor, NgIf, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatOption, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatProgressBar } from '@angular/material/progress-bar';
 import {
@@ -66,6 +66,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AuditTrailsComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -192,12 +197,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
    * @param {Dates} dateUtils Dates utils
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private dateUtils: Dates,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { auditTrailSearchTemplate: any }) => {
       this.auditTrailSearchTemplateData = data.auditTrailSearchTemplate;
     });
@@ -556,7 +556,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
               (fieldName === 'madeOnDate' || fieldName === 'checkedOnDate') &&
               row[fieldName] != null &&
               row[fieldName] !== ''
-                ? JSON.stringify(this.dateUtils.formatDate(row[fieldName], 'YYYY-MM-DDTHH:mm:ssZ'))
+                ? JSON.stringify(this.dateUtils.formatDate(row[fieldName], 'yyyy-MM-ddTHH:mm:ssZ'))
                 : JSON.stringify(row[fieldName], replacer)
             )
           );
@@ -598,6 +598,6 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
       result.setMinutes(minutes || 0);
       result.setSeconds(seconds || 0);
     }
-    return this.dateUtils.formatDate(result, 'YYYY-MM-DDTHH:mm:ssZ');
+    return this.dateUtils.formatDate(result, 'yyyy-MM-ddTHH:mm:ssZ');
   }
 }

src/app/system/audit-trails/view-audit/audit-trail.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 AuditTrailResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Audit Trail data.

src/app/system/audit-trails/view-audit/view-audit.component.html

@@ -60,38 +60,54 @@
               {{ auditTrailData.madeOnDate | datetimeFormat }}
             </div>
 
-            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
-              {{ 'labels.inputs.Office' | translate }}
-            </div>
+            @if (auditTrailData.officeName) {
+              <div class="flex-50 mat-body-strong">
+                {{ 'labels.inputs.Office' | translate }}
+              </div>
+            }
 
-            <div class="flex-50" *ngIf="auditTrailData.officeName">
-              {{ auditTrailData.officeName }}
-            </div>
+            @if (auditTrailData.officeName) {
+              <div class="flex-50">
+                {{ auditTrailData.officeName }}
+              </div>
+            }
 
-            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
-              {{ 'labels.inputs.Savings Account No' | translate }}
-            </div>
+            @if (auditTrailData.savingsAccountNo) {
+              <div class="flex-50 mat-body-strong">
+                {{ 'labels.inputs.Savings Account No' | translate }}
+              </div>
+            }
 
-            <div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
-              {{ auditTrailData.savingsAccountNo }}
-            </div>
+            @if (auditTrailData.savingsAccountNo) {
+              <div class="flex-50">
+                {{ auditTrailData.savingsAccountNo }}
+              </div>
+            }
 
-            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
-              {{ 'labels.inputs.Group Level' | translate }}
-            </div>
+            @if (auditTrailData.groupLevelName) {
+              <div class="flex-50 mat-body-strong">
+                {{ 'labels.inputs.Group Level' | translate }}
+              </div>
+            }
 
-            <div class="flex-50" *ngIf="auditTrailData.groupLevelName">
-              {{ auditTrailData.groupLevelName }}
-            </div>
+            @if (auditTrailData.groupLevelName) {
+              <div class="flex-50">
+                {{ auditTrailData.groupLevelName }}
+              </div>
+            }
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.ip">
-            {{ 'labels.inputs.Client Ip' | translate }}
-          </div>
+          @if (auditTrailData.ip) {
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'labels.inputs.Client Ip' | translate }}
+            </div>
+          }
 
-          <div fxFlex="50%" *ngIf="auditTrailData.ip">
-            {{ auditTrailData.ip }}
-          </div>
+          @if (auditTrailData.ip) {
+            <div fxFlex="50%">
+              {{ auditTrailData.ip }}
+            </div>
+          }
         </div>
 
         <div class="flex-46 command">

src/app/system/audit-trails/view-audit/view-audit.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -44,6 +44,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewAuditComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Audit Trail Data. */
   auditTrailData: any;
   /** Columns to be displayed in audit trail table. */
@@ -63,7 +65,7 @@ export class ViewAuditComponent implements OnInit {
    * Retrieves the audit trail data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { auditTrail: any }) => {
       this.auditTrailData = data.auditTrail;
     });

src/app/system/codes/code.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 CodeResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Code data.

src/app/system/codes/codes.component.html

@@ -25,22 +25,24 @@
       <ng-container matColumnDef="systemDefined">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let code">
-          <fa-icon
-            *ngIf="code.systemDefined"
-            icon="check-circle"
-            size="lg"
-            class="system-defined"
-            matTooltip="{{ 'tooltips.Yes' | translate }}"
-            matTooltipPosition="right"
-          ></fa-icon>
-          <fa-icon
-            *ngIf="!code.systemDefined"
-            icon="times-circle"
-            size="lg"
-            class="not-system-defined"
-            matTooltip="{{ 'tooltips.No' | translate }}"
-            matTooltipPosition="right"
-          ></fa-icon>
+          @if (code.systemDefined) {
+            <fa-icon
+              icon="check-circle"
+              size="lg"
+              class="system-defined"
+              matTooltip="{{ 'tooltips.Yes' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
+          @if (!code.systemDefined) {
+            <fa-icon
+              icon="times-circle"
+              size="lg"
+              class="not-system-defined"
+              matTooltip="{{ 'tooltips.No' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
         </td>
       </ng-container>
 

src/app/system/codes/codes.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -48,6 +48,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CodesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Codes data. */
   codesData: any;
   /** Columns to be displayed in codes table. */
@@ -79,12 +84,7 @@ export class CodesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { codes: any }) => {
       this.codesData = data.codes;
     });

src/app/system/codes/codes.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 CodesResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Codes data.

src/app/system/codes/create-code/create-code.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (codeForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/codes/create-code/create-code.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -19,6 +19,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateCodeComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Code form. */
   codeForm: UntypedFormGroup;
 
@@ -27,23 +34,6 @@ export class CreateCodeComponent implements OnInit, AfterViewInit {
   /* Template for popover on create code form */
   @ViewChild('templateCodeFormRef') templateCodeFormRef: TemplateRef<any>;
 
-  /**
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {SystemService} systemService Accounting Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
-   * @param {PopoverService} popoverService PopoverService.
-   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {}
-
   /**
    * Creates the code form.
    */

src/app/system/codes/edit-code/edit-code.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (codeForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/codes/edit-code/edit-code.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditCodeComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Code Form */
   codeForm: UntypedFormGroup;
   /** Code Data */
@@ -31,12 +36,7 @@ export class EditCodeComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { code: any }) => {
       this.codeData = data.code;
     });

src/app/system/codes/view-code/code-values.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 CodeValuesResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Code Values data.

src/app/system/codes/view-code/view-code.component.html

@@ -4,19 +4,23 @@
     {{ 'labels.buttons.Add Code Value' | translate }}
   </button>
 
-  <span *ngIf="!codeData.systemDefined">
-    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Edit Code' | translate }}
-    </button>
-  </span>
+  @if (!codeData.systemDefined) {
+    <span>
+      <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Edit Code' | translate }}
+      </button>
+    </span>
+  }
 
-  <span *ngIf="!codeData.systemDefined">
-    <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Delete Code' | translate }}
-    </button>
-  </span>
+  @if (!codeData.systemDefined) {
+    <span>
+      <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Delete Code' | translate }}
+      </button>
+    </span>
+  }
 </div>
 
 <div class="container">
@@ -27,103 +31,111 @@
 
     <form [formGroup]="codeValuesForm">
       <mat-card-content>
-        <div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index">
-          <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-            <mat-form-field class="flex-fill flex-20">
-              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-              <input required matInput formControlName="name" placeholder="{{ 'labels.inputs.name' | translate }}" />
-              <mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
-                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field class="flex-fill flex-22">
-              <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-              <input
-                matInput
-                formControlName="description"
-                placeholder="{{ 'labels.inputs.Description' | translate }}"
-              />
-            </mat-form-field>
-
-            <mat-form-field class="flex-fill flex-18">
-              <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
-              <input
-                required
-                matInput
-                formControlName="position"
-                type="number"
-                placeholder="{{ 'labels.inputs.Position' | translate }}"
-              />
-              <mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
-                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <div class="active-wrapper flex-8">
-              <mat-checkbox formControlName="isActive" class="active">{{
-                'labels.inputs.Active' | translate
-              }}</mat-checkbox>
-            </div>
-
-            <div class="options-wrapper gap-2percent flex-22">
-              <span *ngIf="codeValueRowStatus[i] === 'edit'">
+        @for (codeValue of codeValues.controls; track codeValue; let i = $index) {
+          <div formArrayName="codeValues">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+              <mat-form-field class="flex-fill flex-20">
+                <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+                <input required matInput formControlName="name" placeholder="{{ 'labels.inputs.name' | translate }}" />
+                @if (codeValues.at(i).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>
+              <mat-form-field class="flex-fill flex-22">
+                <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+                <input
+                  matInput
+                  formControlName="description"
+                  placeholder="{{ 'labels.inputs.Description' | translate }}"
+                />
+              </mat-form-field>
+              <mat-form-field class="flex-fill flex-18">
+                <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
+                <input
+                  required
+                  matInput
+                  formControlName="position"
+                  type="number"
+                  placeholder="{{ 'labels.inputs.Position' | translate }}"
+                />
+                @if (codeValues.at(i).controls.position.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <div class="active-wrapper flex-8">
+                <mat-checkbox formControlName="isActive" class="active">{{
+                  'labels.inputs.Active' | translate
+                }}</mat-checkbox>
+              </div>
+              <div class="options-wrapper gap-2percent flex-22">
+                @if (codeValueRowStatus[i] === 'edit') {
+                  <span>
+                    <button
+                      mat-stroked-button
+                      color="primary"
+                      type="button"
+                      [disabled]="!codeValues.at(i).valid || codeValues.at(i).pristine"
+                      (click)="updateCodeValue(i)"
+                      *mifosxHasPermission="'UPDATE_CODEVALUE'"
+                    >
+                      {{ 'labels.buttons.Submit' | translate }}
+                    </button>
+                  </span>
+                }
+                @if (codeValueRowStatus[i] === 'edit') {
+                  <button mat-button type="button" (click)="disableRow(i)">
+                    {{ 'labels.buttons.Cancel' | translate }}
+                  </button>
+                }
+                @if (codeValueRowStatus[i] === 'new') {
+                  <button
+                    mat-icon-button
+                    color="primary"
+                    type="button"
+                    title="{{ 'tooltips.Add' | translate }}"
+                    [disabled]="!codeValuesForm.get('codeValues').at(i).valid"
+                    matTooltip="{{ 'tooltips.Add' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="addCodeValue(i)"
+                  >
+                    <fa-icon icon="plus" size="lg"></fa-icon>
+                  </button>
+                }
+                @if (codeValueRowStatus[i] === 'disabled') {
+                  <button
+                    type="button"
+                    color="primary"
+                    title="{{ 'tooltips.Edit' | translate }}"
+                    mat-icon-button
+                    matTooltip="{{ 'tooltips.Edit' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="enableRow(i)"
+                  >
+                    <fa-icon icon="edit" size="lg"></fa-icon>
+                  </button>
+                }
                 <button
-                  mat-stroked-button
-                  color="primary"
                   type="button"
-                  [disabled]="!codeValues.at(i).valid || codeValues.at(i).pristine"
-                  (click)="updateCodeValue(i)"
-                  *mifosxHasPermission="'UPDATE_CODEVALUE'"
+                  color="warn"
+                  title="{{ 'tooltips.Delete' | translate }}"
+                  mat-icon-button
+                  matTooltip="{{ 'tooltips.Delete' | translate }}"
+                  *mifosxHasPermission="'DELETE_CODEVALUE'"
+                  matTooltipPosition="above"
+                  (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)"
                 >
-                  {{ 'labels.buttons.Submit' | translate }}
+                  <fa-icon icon="trash" size="lg"></fa-icon>
                 </button>
-              </span>
-              <button mat-button type="button" *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
-                {{ 'labels.buttons.Cancel' | translate }}
-              </button>
-              <button
-                mat-icon-button
-                color="primary"
-                type="button"
-                title="{{ 'tooltips.Add' | translate }}"
-                [disabled]="!codeValuesForm.get('codeValues').at(i).valid"
-                *ngIf="codeValueRowStatus[i] === 'new'"
-                matTooltip="{{ 'tooltips.Add' | translate }}"
-                matTooltipPosition="above"
-                (click)="addCodeValue(i)"
-              >
-                <fa-icon icon="plus" size="lg"></fa-icon>
-              </button>
-              <button
-                type="button"
-                color="primary"
-                title="{{ 'tooltips.Edit' | translate }}"
-                *ngIf="codeValueRowStatus[i] === 'disabled'"
-                mat-icon-button
-                matTooltip="{{ 'tooltips.Edit' | translate }}"
-                matTooltipPosition="above"
-                (click)="enableRow(i)"
-              >
-                <fa-icon icon="edit" size="lg"></fa-icon>
-              </button>
-              <button
-                type="button"
-                color="warn"
-                title="{{ 'tooltips.Delete' | translate }}"
-                mat-icon-button
-                matTooltip="{{ 'tooltips.Delete' | translate }}"
-                *mifosxHasPermission="'DELETE_CODEVALUE'"
-                matTooltipPosition="above"
-                (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)"
-              >
-                <fa-icon icon="trash" size="lg"></fa-icon>
-              </button>
+              </div>
             </div>
           </div>
-        </div>
+        }
       </mat-card-content>
     </form>
   </mat-card>

src/app/system/codes/view-code/view-code.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormArray,
   UntypedFormBuilder,
@@ -40,6 +40,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewCodeComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Code Data */
   codeData: any;
   /** Code Values Data */
@@ -58,14 +65,7 @@ export class ViewCodeComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { code: any; codeValues: any }) => {
       this.codeData = data.code;
       this.codeValuesData = data.codeValues;

src/app/system/configurations/business-date-tab/business-date-tab.component.html

@@ -1,130 +1,149 @@
 <div class="container space">
   <div class="mat-elevation-z8">
-    <div *ngIf="!isBusinessDateEnabled">
-      <p>
-        {{ 'labels.text.Business Date functionality is not enabled' | translate }}: <code>{{ configurationName }}</code>
-      </p>
-    </div>
+    @if (!isBusinessDateEnabled) {
+      <div>
+        <p>
+          {{ 'labels.text.Business Date functionality is not enabled' | translate }}:
+          <code>{{ configurationName }}</code>
+        </p>
+      </div>
+    }
 
-    <div *ngIf="isBusinessDateEnabled">
-      <mat-card>
-        <form [formGroup]="businessDateForm">
-          <mat-card-content>
-            <div class="flex-100 layout-row layout-lt-md-column space">
-              <div class="flex-50">
-                <span class="date-type flex-40">{{ 'labels.inputs.User date format' | translate }}: </span>
-                <span class="date-value flex-60 m-l-30">{{ userDateFormat }}</span>
+    @if (isBusinessDateEnabled) {
+      <div>
+        <mat-card>
+          <form [formGroup]="businessDateForm">
+            <mat-card-content>
+              <div class="flex-100 layout-row layout-lt-md-column space">
+                <div class="flex-50">
+                  <span class="date-type flex-40">{{ 'labels.inputs.User date format' | translate }}: </span>
+                  <span class="date-value flex-60 m-l-30">{{ userDateFormat }}</span>
+                </div>
               </div>
-            </div>
-
-            <!-- Business Date -->
-            <div class="flex-100 layout-row layout-lt-md-column">
-              <div class="flex-50 table-row" *ngIf="!isEditInProgress">
-                <span class="date-type flex-40">{{ 'labels.inputs.Business Date' | translate }}: </span>
-                <span class="date-value flex-60 m-l-40">{{ businessDate | dateFormat }}</span>
+              <!-- Business Date -->
+              <div class="flex-100 layout-row layout-lt-md-column">
+                @if (!isEditInProgress) {
+                  <div class="flex-50 table-row">
+                    <span class="date-type flex-40">{{ 'labels.inputs.Business Date' | translate }}: </span>
+                    <span class="date-value flex-60 m-l-40">{{ businessDate | dateFormat }}</span>
+                  </div>
+                }
+                @if (isEditInProgress && dateIndex === 0) {
+                  <mat-form-field (click)="businessDatePicker.open()">
+                    <mat-label>{{ 'labels.inputs.Business Date' | translate }}</mat-label>
+                    <input
+                      matInput
+                      [min]="minDate"
+                      [max]="maxDate"
+                      [matDatepicker]="businessDatePicker"
+                      formControlName="businessDate"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="businessDatePicker"> </mat-datepicker-toggle>
+                    <mat-datepicker #businessDatePicker></mat-datepicker>
+                    @if (businessDateForm.controls.businessDate.hasError('required')) {
+                      <mat-error>
+                        {{ 'labels.inputs.Business Date' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                }
+                <div class="options-wrapper gap-2percent flex-22">
+                  @if (isEditInProgress && dateIndex === 0) {
+                    <span>
+                      <button
+                        mat-raised-button
+                        color="primary"
+                        [disabled]="businessDateForm.pristine"
+                        (click)="submit()"
+                        *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
+                      >
+                        {{ 'labels.buttons.Submit' | translate }}
+                      </button>
+                      <button mat-raised-button (click)="editInProgressToggle(0)">
+                        {{ 'labels.buttons.Cancel' | translate }}
+                      </button>
+                    </span>
+                  }
+                  @if (!isEditInProgress) {
+                    <button
+                      type="button"
+                      color="primary"
+                      mat-icon-button
+                      matTooltip="{{ 'tooltips.Edit the Business Date' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="editInProgressToggle(0)"
+                    >
+                      <fa-icon icon="edit" size="lg"></fa-icon>
+                    </button>
+                  }
+                </div>
               </div>
-
-              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && dateIndex === 0">
-                <mat-label>{{ 'labels.inputs.Business Date' | translate }}</mat-label>
-                <input
-                  matInput
-                  [min]="minDate"
-                  [max]="maxDate"
-                  [matDatepicker]="businessDatePicker"
-                  formControlName="businessDate"
-                />
-                <mat-datepicker-toggle matSuffix [for]="businessDatePicker"> </mat-datepicker-toggle>
-                <mat-datepicker #businessDatePicker></mat-datepicker>
-                <mat-error *ngIf="businessDateForm.controls.businessDate.hasError('required')">
-                  {{ 'labels.inputs.Business Date' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              </mat-form-field>
-
-              <div class="options-wrapper gap-2percent flex-22">
-                <span *ngIf="isEditInProgress && dateIndex === 0">
-                  <button
-                    mat-raised-button
-                    color="primary"
-                    [disabled]="businessDateForm.pristine"
-                    (click)="submit()"
-                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
-                  >
-                    {{ 'labels.buttons.Submit' | translate }}
-                  </button>
-                  <button mat-raised-button (click)="editInProgressToggle(0)">
-                    {{ 'labels.buttons.Cancel' | translate }}
-                  </button>
-                </span>
-                <button
-                  type="button"
-                  color="primary"
-                  *ngIf="!isEditInProgress"
-                  mat-icon-button
-                  matTooltip="{{ 'tooltips.Edit the Business Date' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="editInProgressToggle(0)"
-                >
-                  <fa-icon icon="edit" size="lg"></fa-icon>
-                </button>
+              <!-- COB Date -->
+              <div class="flex-100 layout-row layout-lt-md-column">
+                @if (!isEditInProgress) {
+                  <div class="flex-50 table-row">
+                    <span class="date-type">{{ 'labels.inputs.COB Date' | translate }}: </span>
+                    <span class="date-value flex-60 m-l-80">{{ cobDate | dateFormat }}</span>
+                  </div>
+                }
+                @if (isEditInProgress && dateIndex === 1) {
+                  <mat-form-field (click)="cobDatePicker.open()">
+                    <mat-label>{{ 'labels.inputs.COB Date' | translate }}</mat-label>
+                    <input
+                      matInput
+                      [min]="minDate"
+                      [max]="maxDate"
+                      [matDatepicker]="cobDatePicker"
+                      formControlName="businessDate"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="cobDatePicker"> </mat-datepicker-toggle>
+                    <mat-datepicker #cobDatePicker></mat-datepicker>
+                    @if (businessDateForm.controls.cobDate.hasError('required')) {
+                      <mat-error>
+                        {{ 'labels.inputs.COB Date' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                }
+                <div class="options-wrapper flex-22 gap-4percent">
+                  @if (isEditInProgress && dateIndex === 1) {
+                    <span>
+                      <button
+                        mat-stroked-button
+                        color="primary"
+                        [disabled]="businessDateForm.pristine"
+                        (click)="submit()"
+                        *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
+                      >
+                        {{ 'labels.buttons.Submit' | translate }}
+                      </button>
+                    </span>
+                  }
+                  @if (isEditInProgress && dateIndex === 1) {
+                    <button mat-button (click)="editInProgressToggle(1)">
+                      {{ 'labels.buttons.Cancel' | translate }}
+                    </button>
+                  }
+                  @if (!isEditInProgress) {
+                    <button
+                      type="button"
+                      color="primary"
+                      mat-icon-button
+                      matTooltip="{{ 'tooltips.Edit the COB Date' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="editInProgressToggle(1)"
+                    >
+                      <fa-icon icon="edit" size="lg"></fa-icon>
+                    </button>
+                  }
+                </div>
               </div>
-            </div>
-
-            <!-- COB Date -->
-            <div class="flex-100 layout-row layout-lt-md-column">
-              <div class="flex-50 table-row" *ngIf="!isEditInProgress">
-                <span class="date-type">{{ 'labels.inputs.COB Date' | translate }}: </span>
-                <span class="date-value flex-60 m-l-80">{{ cobDate | dateFormat }}</span>
-              </div>
-
-              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && dateIndex === 1">
-                <mat-label>{{ 'labels.inputs.COB Date' | translate }}</mat-label>
-                <input
-                  matInput
-                  [min]="minDate"
-                  [max]="maxDate"
-                  [matDatepicker]="cobDatePicker"
-                  formControlName="businessDate"
-                />
-                <mat-datepicker-toggle matSuffix [for]="cobDatePicker"> </mat-datepicker-toggle>
-                <mat-datepicker #cobDatePicker></mat-datepicker>
-                <mat-error *ngIf="businessDateForm.controls.cobDate.hasError('required')">
-                  {{ 'labels.inputs.COB Date' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              </mat-form-field>
-
-              <div class="options-wrapper flex-22 gap-4percent">
-                <span *ngIf="isEditInProgress && dateIndex === 1">
-                  <button
-                    mat-stroked-button
-                    color="primary"
-                    [disabled]="businessDateForm.pristine"
-                    (click)="submit()"
-                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
-                  >
-                    {{ 'labels.buttons.Submit' | translate }}
-                  </button>
-                </span>
-                <button mat-button *ngIf="isEditInProgress && dateIndex === 1" (click)="editInProgressToggle(1)">
-                  {{ 'labels.buttons.Cancel' | translate }}
-                </button>
-                <button
-                  type="button"
-                  color="primary"
-                  *ngIf="!isEditInProgress"
-                  mat-icon-button
-                  matTooltip="{{ 'tooltips.Edit the COB Date' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="editInProgressToggle(1)"
-                >
-                  <fa-icon icon="edit" size="lg"></fa-icon>
-                </button>
-              </div>
-            </div>
-          </mat-card-content>
-        </form>
-      </mat-card>
-    </div>
+            </mat-card-content>
+          </form>
+        </mat-card>
+      </div>
+    }
   </div>
 </div>

src/app/system/configurations/business-date-tab/business-date-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 
 import { Alert } from 'app/core/alert/alert.model';
@@ -29,6 +29,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class BusinessDateTabComponent implements OnInit {
+  private systemService = inject(SystemService);
+  private settingsService = inject(SettingsService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private alertService = inject(AlertService);
+
   /** Subscription to alerts. */
   alert$: Subscription;
 
@@ -50,21 +56,6 @@ export class BusinessDateTabComponent implements OnInit {
   isBusinessDateEnabled = false;
   isEditInProgress = false;
 
-  /**
-   * Retrieves the configurations data from `resolve`.
-   * @param {SystemService} systemService System Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {Dates} dateUtils Date Utils.
-   */
-  constructor(
-    private systemService: SystemService,
-    private settingsService: SettingsService,
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private alertService: AlertService
-  ) {}
-
   ngOnInit(): void {
     this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
       const alertType = alertEvent.type;

src/app/system/configurations/configurations.component.html

@@ -4,9 +4,11 @@
       <mat-tab label="{{ 'labels.inputs.Global Configurations' | translate }}">
         <mifosx-global-configurations-tab></mifosx-global-configurations-tab>
       </mat-tab>
-      <mat-tab label="{{ 'labels.inputs.Business Date' | translate }}" *ngIf="isBusinessDateEnabled">
-        <mifosx-business-date-tab></mifosx-business-date-tab>
-      </mat-tab>
+      @if (isBusinessDateEnabled) {
+        <mat-tab label="{{ 'labels.inputs.Business Date' | translate }}">
+          <mifosx-business-date-tab></mifosx-business-date-tab>
+        </mat-tab>
+      }
     </mat-tab-group>
   </mat-card-content>
 </mat-card>

src/app/system/configurations/configurations.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Alert } from 'app/core/alert/alert.model';
 import { AlertService } from 'app/core/alert/alert.service';
 import { SettingsService } from 'app/settings/settings.service';
@@ -22,16 +22,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ConfigurationsComponent implements OnInit {
+  private alertService = inject(AlertService);
+  private systemService = inject(SystemService);
+
   /** Subscription to alerts. */
   alert$: Subscription;
 
   isBusinessDateEnabled = false;
 
-  constructor(
-    private alertService: AlertService,
-    private systemService: SystemService
-  ) {}
-
   ngOnInit(): void {
     this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
       const alertType = alertEvent.type;

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
@@ -22,6 +22,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditConfigurationComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private settingsService = inject(SettingsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum transaction date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum transaction date allowed. */
@@ -40,13 +46,7 @@ export class EditConfigurationComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private settingsService: SettingsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { configuration: any }) => {
       this.configuration = data.configuration;
     });

src/app/system/configurations/global-configurations-tab/global-configuration.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 GlobalConfigurationResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Configuration data.

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html

@@ -12,12 +12,13 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let configuration">
           <span class="m-r-10">{{ configuration.name }}</span>
-          <fa-icon
-            *ngIf="configuration.description"
-            icon="question-circle"
-            matTooltip="{{ configuration.description | translate }}"
-            matTooltipPosition="right"
-          ></fa-icon>
+          @if (configuration.description) {
+            <fa-icon
+              icon="question-circle"
+              matTooltip="{{ configuration.description | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
         </td>
       </ng-container>
 
@@ -30,8 +31,12 @@
             (click)="toggleStatus(configuration)"
           >
             <div [className]="configuration.enabled ? 'enabled' : 'disabled'">
-              <span *ngIf="configuration.enabled">{{ 'labels.inputs.Enabled' | translate }}</span>
-              <span *ngIf="!configuration.enabled">{{ 'labels.inputs.Disabled' | translate }}</span>
+              @if (configuration.enabled) {
+                <span>{{ 'labels.inputs.Enabled' | translate }}</span>
+              }
+              @if (!configuration.enabled) {
+                <span>{{ 'labels.inputs.Disabled' | translate }}</span>
+              }
             </div>
           </mat-slide-toggle>
         </td>

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -57,6 +57,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private alertService = inject(AlertService);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Configuration data. */
   configurationData: any;
   /** Columns to be displayed in configurations table. */
@@ -93,14 +100,7 @@ export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private alertService: AlertService,
-    private systemService: SystemService,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { configurations: any }) => {
       this.configurationData = data.configurations;
     });

src/app/system/configurations/global-configurations-tab/global-configurations.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 GlobalConfigurationsResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the configurations data.

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html

@@ -18,15 +18,16 @@
       <div class="layout-row">
         <div #mcTable class="layout-column flex-30">
           <mat-list>
-            <mat-list-item
-              [ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
-              *ngFor="let grouping of groupings"
-              (click)="showPermissions(grouping)"
-            >
-              <span class="grouping-name">
-                {{ formatName(grouping) }}
-              </span>
-            </mat-list-item>
+            @for (grouping of groupings; track grouping) {
+              <mat-list-item
+                [ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
+                (click)="showPermissions(grouping)"
+              >
+                <span class="grouping-name">
+                  {{ formatName(grouping) }}
+                </span>
+              </mat-list-item>
+            }
           </mat-list>
         </div>
 
@@ -34,29 +35,33 @@
         <div class="list-permission layout-column flex-70">
           <form [formGroup]="formGroup" (submit)="submit()">
             <div formArrayName="roster">
-              <div *ngFor="let permission of permissions.permissions; let i = index" class="display-permissions">
-                <div [formGroupName]="i">
-                  <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
-                    {{ permissionName(permission.code) }}
-                  </mat-checkbox>
+              @for (permission of permissions.permissions; track permission; let i = $index) {
+                <div class="display-permissions">
+                  <div [formGroupName]="i">
+                    <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
+                      {{ permissionName(permission.code) }}
+                    </mat-checkbox>
+                  </div>
                 </div>
-              </div>
+              }
             </div>
           </form>
         </div>
       </div>
     </ng-container>
 
-    <div class="layout-row layout-align-center gap-5px layout-xs-column" *ngIf="!isDisabled">
-      <mat-card-actions>
-        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
-          {{ 'labels.buttons.Cancel' | translate }}
-        </button>
-        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">
-          {{ 'labels.buttons.Submit' | translate }}
-        </button>
-      </mat-card-actions>
-    </div>
+    @if (!isDisabled) {
+      <div class="layout-row layout-align-center gap-5px layout-xs-column">
+        <mat-card-actions>
+          <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
+        </mat-card-actions>
+      </div>
+    }
   </mat-card>
 </div>
 

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as _ from 'lodash';
@@ -9,7 +9,7 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 import { SystemService } from '../system.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatList, MatListItem } from '@angular/material/list';
-import { NgFor, NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatDivider } from '@angular/material/divider';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -50,6 +50,13 @@ interface SubmitPermissionData {
   ]
 })
 export class ConfigureMakerCheckerTasksComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   permissionsData: Permission[] = [];
   groupings: string[] = [];
   currentGrouping = '';
@@ -82,14 +89,7 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit, AfterViewIni
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private formBuilder: UntypedFormBuilder,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { permissions: any }) => {
       this.permissionsData = data.permissions;
     });

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.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 MakerCheckerTasksResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns all the Configurable Maker Checker Tasks.

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.

src/app/system/external-services/amazon-s3/amazon-s3.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
   MatTableDataSource,
@@ -43,6 +43,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AmazonS3Component implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Amazon S3 configuration data. */
   amazonS3ConfigurationData: any;
   /** Columns to be displayed in Amazon S3 configuration table. */
@@ -60,7 +62,7 @@ export class AmazonS3Component implements OnInit {
    * Retrieves the Amazon S3 configuration data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { amazonS3Configuration: any }) => {
       this.amazonS3ConfigurationData = data.amazonS3Configuration;
     });

src/app/system/external-services/amazon-s3/amazon-s3.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 AmazonS3ConfigurationResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Amazon S3 Configuration data.

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html

@@ -6,50 +6,66 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.S3 Bucket Name' | translate }}</mat-label>
             <input matInput required formControlName="s3_bucket_name" />
-            <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')">
-              {{ 'labels.inputs.S3 Bucket Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.S3 Bucket Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.S3 Access Key' | translate }}</mat-label>
             <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key" />
-            <button
-              mat-button
-              *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value"
-              matSuffix
-              mat-icon-button
-              (mousedown)="accessKeyInputType = 'text'"
-              (mouseup)="accessKeyInputType = 'password'"
-            >
-              <fa-icon *ngIf="accessKeyInputType === 'password'" icon="eye"></fa-icon>
-              <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
-            </button>
-            <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              {{ 'labels.inputs.S3 Access Key' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (amazonS3ConfigurationForm.controls.s3_access_key.value) {
+              <button
+                mat-button
+                matSuffix
+                mat-icon-button
+                (mousedown)="accessKeyInputType = 'text'"
+                (mouseup)="accessKeyInputType = 'password'"
+              >
+                @if (accessKeyInputType === 'password') {
+                  <fa-icon icon="eye"></fa-icon>
+                }
+                @if (accessKeyInputType === 'text') {
+                  <fa-icon icon="eye-slash"></fa-icon>
+                }
+              </button>
+            }
+            @if (amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.S3 Access Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.S3 Secret Key' | translate }}</mat-label>
             <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key" />
-            <button
-              mat-button
-              *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value"
-              matSuffix
-              mat-icon-button
-              (mousedown)="secretKeyInputType = 'text'"
-              (mouseup)="secretKeyInputType = 'password'"
-            >
-              <fa-icon *ngIf="secretKeyInputType === 'password'" icon="eye"></fa-icon>
-              <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
-            </button>
-            <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
-              {{ 'labels.inputs.S3 Secret Key' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (amazonS3ConfigurationForm.controls.s3_secret_key.value) {
+              <button
+                mat-button
+                matSuffix
+                mat-icon-button
+                (mousedown)="secretKeyInputType = 'text'"
+                (mouseup)="secretKeyInputType = 'password'"
+              >
+                @if (secretKeyInputType === 'password') {
+                  <fa-icon icon="eye"></fa-icon>
+                }
+                @if (secretKeyInputType === 'text') {
+                  <fa-icon icon="eye-slash"></fa-icon>
+                }
+              </button>
+            }
+            @if (amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.S3 Secret Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -23,6 +23,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditAmazonS3Component implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Amazon S3 Configuration data */
   amazonS3ConfigurationData: any;
   /** Amazon S3 Configuration Form */
@@ -39,12 +44,7 @@ export class EditAmazonS3Component implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { amazonS3Configuration: any }) => {
       this.amazonS3ConfigurationData = data.amazonS3Configuration;
     });

src/app/system/external-services/email/edit-email/edit-email.component.html

@@ -6,48 +6,61 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
             <input matInput required formControlName="username" />
-            <mat-error *ngIf="emailConfigurationForm.controls.username.hasError('required')">
-              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.username.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
             <input matInput required type="{{ passwordInputType }}" formControlName="password" />
-            <button
-              mat-button
-              *ngIf="emailConfigurationForm.controls.password.value"
-              matSuffix
-              mat-icon-button
-              (mousedown)="passwordInputType = 'text'"
-              (mouseup)="passwordInputType = 'password'"
-            >
-              <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
-              <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
-            </button>
-            <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
-              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.password.value) {
+              <button
+                mat-button
+                matSuffix
+                mat-icon-button
+                (mousedown)="passwordInputType = 'text'"
+                (mouseup)="passwordInputType = 'password'"
+              >
+                @if (passwordInputType === 'password') {
+                  <fa-icon icon="eye"></fa-icon>
+                }
+                @if (passwordInputType === 'text') {
+                  <fa-icon icon="eye-slash"></fa-icon>
+                }
+              </button>
+            }
+            @if (emailConfigurationForm.controls.password.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Host' | translate }}</mat-label>
             <input matInput required formControlName="host" />
-            <mat-error *ngIf="emailConfigurationForm.controls.host.hasError('required')">
-              {{ 'labels.inputs.Host' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.host.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Host' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Port' | translate }}</mat-label>
             <input matInput type="number" required formControlName="port" />
-            <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
-              {{ 'labels.inputs.Port' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.port.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Port' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="useTLS" class="margin-v flex-48">
@@ -57,19 +70,23 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.From Email' | translate }}</mat-label>
             <input matInput type="email" required formControlName="fromEmail" />
-            <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              {{ 'labels.inputs.From Email' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.fromEmail.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Email' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.From Name' | translate }}</mat-label>
             <input matInput required formControlName="fromName" />
-            <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
-              {{ 'labels.inputs.From Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (emailConfigurationForm.controls.fromName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/external-services/email/edit-email/edit-email.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -25,6 +25,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditEmailComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Password input field type. */
   passwordInputType: string;
   /** Email Configuration data */
@@ -39,12 +44,7 @@ export class EditEmailComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { emailConfiguration: any }) => {
       this.emailConfigurationData = data.emailConfiguration;
     });

src/app/system/external-services/email/email.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -43,6 +43,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EmailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Email configuration data. */
   emailConfigurationData: any;
   /** Columns to be displayed in Email configuration table. */
@@ -60,7 +62,7 @@ export class EmailComponent implements OnInit {
    * Retrieves the Email configuration data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { emailConfiguration: any }) => {
       this.emailConfigurationData = data.emailConfiguration;
     });

src/app/system/external-services/email/email.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 EmailConfigurationResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Email Configuration data.

src/app/system/external-services/external-services.component.html

@@ -8,21 +8,17 @@
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
-            <fa-icon
-              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
-              *ngIf="!arrowBooleans[0]"
-              icon="arrow-down"
-              size="md"
-            ></fa-icon>
-            <fa-icon
-              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
-              *ngIf="arrowBooleans[0]"
-              icon="arrow-up"
-              size="md"
-            ></fa-icon>
-            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">
-              {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
-            </p>
+            @if (!arrowBooleans[0]) {
+              <fa-icon (click)="arrowBooleansToggle(0); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[0]) {
+              <fa-icon (click)="arrowBooleansToggle(0); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[0]) {
+              <p matLine [routerLink]="['amazon-s3']">
+                {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item [routerLink]="['sms']">
@@ -30,21 +26,17 @@
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
-            <fa-icon
-              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
-              *ngIf="!arrowBooleans[1]"
-              icon="arrow-down"
-              size="md"
-            ></fa-icon>
-            <fa-icon
-              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
-              *ngIf="arrowBooleans[1]"
-              icon="arrow-up"
-              size="md"
-            ></fa-icon>
-            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">
-              {{ 'labels.text.SMS Service Configuration' | translate }}
-            </p>
+            @if (!arrowBooleans[1]) {
+              <fa-icon (click)="arrowBooleansToggle(1); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[1]) {
+              <fa-icon (click)="arrowBooleansToggle(1); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[1]) {
+              <p matLine [routerLink]="['sms']">
+                {{ 'labels.text.SMS Service Configuration' | translate }}
+              </p>
+            }
           </mat-list-item>
         </mat-nav-list>
       </div>
@@ -56,21 +48,17 @@
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
-            <fa-icon
-              (click)="arrowBooleansToggle(2); $event.stopPropagation()"
-              *ngIf="!arrowBooleans[2]"
-              icon="arrow-down"
-              size="md"
-            ></fa-icon>
-            <fa-icon
-              (click)="arrowBooleansToggle(2); $event.stopPropagation()"
-              *ngIf="arrowBooleans[2]"
-              icon="arrow-up"
-              size="md"
-            ></fa-icon>
-            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">
-              {{ 'labels.text.Email Service Configuration' | translate }}
-            </p>
+            @if (!arrowBooleans[2]) {
+              <fa-icon (click)="arrowBooleansToggle(2); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[2]) {
+              <fa-icon (click)="arrowBooleansToggle(2); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[2]) {
+              <p matLine [routerLink]="['email']">
+                {{ 'labels.text.Email Service Configuration' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item [routerLink]="['notification']">
@@ -80,21 +68,17 @@
             <h4 matLine [routerLink]="['notification']">
               {{ 'labels.heading.Notification External Service' | translate }}
             </h4>
-            <fa-icon
-              (click)="arrowBooleansToggle(3); $event.stopPropagation()"
-              *ngIf="!arrowBooleans[3]"
-              icon="arrow-down"
-              size="md"
-            ></fa-icon>
-            <fa-icon
-              (click)="arrowBooleansToggle(3); $event.stopPropagation()"
-              *ngIf="arrowBooleans[3]"
-              icon="arrow-up"
-              size="md"
-            ></fa-icon>
-            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">
-              {{ 'labels.text.Notification Service Configuration' | translate }}
-            </p>
+            @if (!arrowBooleans[3]) {
+              <fa-icon (click)="arrowBooleansToggle(3); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[3]) {
+              <fa-icon (click)="arrowBooleansToggle(3); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[3]) {
+              <p matLine [routerLink]="['notification']">
+                {{ 'labels.text.Notification Service Configuration' | translate }}
+              </p>
+            }
           </mat-list-item>
         </mat-nav-list>
       </div>

src/app/system/external-services/notification/edit-notification/edit-notification.component.html

@@ -6,28 +6,34 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Server Key' | translate }}</mat-label>
             <input matInput required formControlName="server_key" />
-            <mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
-              {{ 'labels.inputs.Server Key' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (notificationConfigurationForm.controls.server_key.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Server Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.GCM End Point' | translate }}</mat-label>
             <input matInput required formControlName="gcm_end_point" />
-            <mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
-              {{ 'labels.inputs.GCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (notificationConfigurationForm.controls.gcm_end_point.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.GCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.FCM End Point' | translate }}</mat-label>
             <input matInput required formControlName="fcm_end_point" />
-            <mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
-              {{ 'labels.inputs.FCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (notificationConfigurationForm.controls.fcm_end_point.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.FCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/external-services/notification/edit-notification/edit-notification.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditNotificationComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Notification Configuration data */
   notificationConfigurationData: any;
   /** Notification Configuration Form */
@@ -31,12 +36,7 @@ export class EditNotificationComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { notificationConfiguration: any }) => {
       this.notificationConfigurationData = data.notificationConfiguration;
     });

src/app/system/external-services/notification/notification.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -43,6 +43,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class NotificationComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Notification configuration data. */
   notificationConfigurationData: any;
   /** Columns to be displayed in Notification configuration table. */
@@ -60,7 +62,7 @@ export class NotificationComponent implements OnInit {
    * Retrieves the Notification configuration data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { notificationConfiguration: any }) => {
       this.notificationConfigurationData = data.notificationConfiguration;
     });

src/app/system/external-services/notification/notification.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 NotificationConfigurationResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Notification Configuration data.

src/app/system/external-services/sms/edit-sms/edit-sms.component.html

@@ -6,37 +6,45 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Host Name' | translate }}</mat-label>
             <input matInput required formControlName="host_name" />
-            <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
-              {{ 'labels.inputs.Host Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (smsConfigurationForm.controls.host_name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Host Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Port Number' | translate }}</mat-label>
             <input matInput required formControlName="port_number" />
-            <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
-              {{ 'labels.inputs.Port Number' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (smsConfigurationForm.controls.port_number.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Port Number' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.End Point' | translate }}</mat-label>
             <input matInput required formControlName="end_point" />
-            <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
-              {{ 'labels.inputs.End Point' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (smsConfigurationForm.controls.end_point.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.End Point' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Tenant App Key' | translate }}</mat-label>
             <input matInput required formControlName="tenant_app_key" />
-            <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
-              {{ 'labels.inputs.Tenant App Key' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (smsConfigurationForm.controls.tenant_app_key.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Tenant App Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/system/external-services/sms/edit-sms/edit-sms.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditSMSComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** SMS Configuration data */
   smsConfigurationData: any;
   /** SMS Configuration Form */
@@ -31,12 +36,7 @@ export class EditSMSComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { smsConfiguration: any }) => {
       this.smsConfigurationData = data.smsConfiguration;
     });

src/app/system/external-services/sms/sms.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -43,6 +43,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SMSComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** SMS configuration data. */
   smsConfigurationData: any;
   /** Columns to be displayed in SMS configuration table. */
@@ -60,7 +62,7 @@ export class SMSComponent implements OnInit {
    * Retrieves the SMS configuration data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { smsConfiguration: any }) => {
       this.smsConfigurationData = data.smsConfiguration;
     });

src/app/system/external-services/sms/sms.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 SMSConfigurationResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the SMS Configuration data.

src/app/system/manage-data-tables/column-dialog/column-dialog.component.html

@@ -9,44 +9,56 @@
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Column Name' | translate }}</mat-label>
         <input matInput required formControlName="name" placeholder="{{ 'labels.inputs.Column Name' | translate }}" />
-        <mat-error *ngIf="columnForm.controls.name.hasError('required')">
-          {{ 'labels.inputs.Column Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (columnForm.controls.name.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Column Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Column Type' | translate }}</mat-label>
         <mat-select required formControlName="type">
-          <mat-option *ngFor="let columnType of columnTypeData" [value]="columnType.value">
-            {{ columnType.displayValue | translateKey: 'inputs' }}
-          </mat-option>
+          @for (columnType of columnTypeData; track columnType) {
+            <mat-option [value]="columnType.value">
+              {{ columnType.displayValue | translateKey: 'inputs' }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="columnForm.controls.type.hasError('required')">
-          {{ 'labels.inputs.Column Type' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (columnForm.controls.type.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Column Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
 
-      <mat-form-field *ngIf="columnForm.value.type === 'String'">
-        <mat-label> {{ 'labels.inputs.Column Length' | translate }}</mat-label>
-        <input
-          matInput
-          required
-          type="number"
-          formControlName="length"
-          placeholder="{{ 'labels.inputs.Column Length' | translate }}"
-        />
-      </mat-form-field>
+      @if (columnForm.value.type === 'String') {
+        <mat-form-field>
+          <mat-label> {{ 'labels.inputs.Column Length' | translate }}</mat-label>
+          <input
+            matInput
+            required
+            type="number"
+            formControlName="length"
+            placeholder="{{ 'labels.inputs.Column Length' | translate }}"
+          />
+        </mat-form-field>
+      }
 
-      <mat-form-field *ngIf="columnForm.value.type === 'Dropdown'">
-        <mat-label> {{ 'labels.inputs.Column Code' | translate }}</mat-label>
-        <mat-select required formControlName="code">
-          <mat-option *ngFor="let columnCode of data.columnCodes" [value]="columnCode.name">
-            {{ columnCode.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      @if (columnForm.value.type === 'Dropdown') {
+        <mat-form-field>
+          <mat-label> {{ 'labels.inputs.Column Code' | translate }}</mat-label>
+          <mat-select required formControlName="code">
+            @for (columnCode of data.columnCodes; track columnCode) {
+              <mat-option [value]="columnCode.name">
+                {{ columnCode.name }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
 
       <div>
         <mat-checkbox labelPosition="after" formControlName="mandatory">{{

src/app/system/manage-data-tables/column-dialog/column-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogRef,
@@ -34,22 +34,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ColumnDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ColumnDialogComponent>>(MatDialogRef);
+  formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
   /** Column Form. */
   columnForm: UntypedFormGroup;
   /** Column Type Data */
   columnTypeData = columnTypeData;
 
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {any} data Provides the column codes and values for the form (if available).
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ColumnDialogComponent>,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
-
   /**
    * Creates the add column form.
    */
@@ -69,7 +62,6 @@ export class ColumnDialogComponent implements OnInit {
           disabled: this.data.type === 'existing'
         },
         Validators.required
-
       ],
       length: [
         {
@@ -77,7 +69,6 @@ export class ColumnDialogComponent implements OnInit {
           disabled: this.getColumnType(this.data.columnDisplayType) !== 'String' || this.data.type === 'existing'
         },
         Validators.required
-
       ],
       mandatory: [{ value: this.data.isColumnNullable, disabled: this.data.type === 'existing' }],
       unique: [
@@ -89,7 +80,6 @@ export class ColumnDialogComponent implements OnInit {
           disabled: this.getColumnType(this.data.columnDisplayType) !== 'Dropdown' || this.data.type === 'existing'
         },
         Validators.required
-
       ]
     });
     this.onColumnTypeChanges();

src/app/system/manage-data-tables/create-data-table/create-data-table.component.html

@@ -6,42 +6,56 @@
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
             <input matInput required formControlName="datatableName" />
-            <mat-error *ngIf="dataTableForm.controls.datatableName.hasError('required')">
-              {{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.datatableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-fill flex-20">
             <mat-label>{{ 'labels.inputs.Entity Type' | translate }}</mat-label>
             <mat-select required formControlName="apptableName">
-              <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey: 'inputs' }}
-              </mat-option>
+              @for (appTable of appTableData; track appTable) {
+                <mat-option [value]="appTable.value">
+                  {{ appTable.displayValue | translateKey: 'inputs' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.apptableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
-            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showEntitySubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (entitySubType of entitySubTypeData; track entitySubType) {
+                  <mat-option [value]="entitySubType.value">
+                    {{ entitySubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
-          <mat-form-field class="flex-fill flex-20" *ngIf="showSavingsSubType">
-            <mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let savingsSubType of savingsSubTypeData" [value]="savingsSubType.value">
-                {{ savingsSubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showSavingsSubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (savingsSubType of savingsSubTypeData; track savingsSubType) {
+                  <mat-option [value]="savingsSubType.value">
+                    {{ savingsSubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
           <div class="multi-row-wrapper flex-14">
             <mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">{{
@@ -67,14 +81,15 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
             <td mat-cell *matCellDef="let column">
               {{ column.columnName }}
-              <fa-icon
-                *ngIf="column.isColumnPrimaryKey"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Primary Key' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnPrimaryKey) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Primary Key' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -96,22 +111,24 @@
           <ng-container matColumnDef="mandatory">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.text.Mandatory' | translate }}</th>
             <td mat-cell *matCellDef="let column" class="left">
-              <fa-icon
-                *ngIf="!column.isColumnNullable"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="column.isColumnNullable"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (!column.isColumnNullable) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (column.isColumnNullable) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -120,22 +137,24 @@
               {{ 'labels.inputs.Unique' | translate }}
             </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnUnique"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnUnique"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                unique="right"
-              ></fa-icon>
+              @if (column.isColumnUnique) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnUnique) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  unique="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -144,22 +163,24 @@
               {{ 'labels.inputs.Indexed' | translate }}
             </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnIndexed"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnIndexed"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnIndexed) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnIndexed) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 

src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -70,6 +70,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateDataTableComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  private translateService = inject(TranslateService);
+
   /** Data Table Form */
   dataTableForm: UntypedFormGroup;
   /** Application Table Data */
@@ -126,16 +135,7 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
    * @param {PopoverService} popoverService PopoverService.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { columnCodes: any }) => {
       this.dataForDialog.columnCodes = data.columnCodes;
     });

src/app/system/manage-data-tables/data-table.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 DataTableResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Data Table data.

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html

@@ -11,24 +11,32 @@
           <mat-form-field class="flex-fill flex-20">
             <mat-label>{{ 'labels.inputs.Application Table Name' | translate }}</mat-label>
             <mat-select required formControlName="apptableName">
-              <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey: 'inputs' }}
-              </mat-option>
+              @for (appTable of appTableData; track appTable) {
+                <mat-option [value]="appTable.value">
+                  {{ appTable.displayValue | translateKey: 'inputs' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.apptableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
-            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showEntitySubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (entitySubType of entitySubTypeData; track entitySubType) {
+                  <mat-option [value]="entitySubType.value">
+                    {{ entitySubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
         </div>
 
         <br />
@@ -78,22 +86,24 @@
               {{ 'labels.text.Mandatory' | translate }}
             </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="!column.isColumnNullable"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="column.isColumnNullable"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (!column.isColumnNullable) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (column.isColumnNullable) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -102,22 +112,24 @@
               {{ 'labels.inputs.Unique' | translate }}
             </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnUnique"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnUnique"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                unique="right"
-              ></fa-icon>
+              @if (column.isColumnUnique) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnUnique) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  unique="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -126,22 +138,24 @@
               {{ 'labels.inputs.Indexed' | translate }}
             </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnIndexed"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnIndexed"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnIndexed) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnIndexed) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
             </td>
           </ng-container>
 
@@ -150,12 +164,16 @@
               {{ 'labels.inputs.Actions' | translate }}
             </th>
             <td mat-cell *matCellDef="let column" class="center gap-15percent">
-              <button type="button" color="primary" mat-icon-button (click)="editColumn(column)" *ngIf="!column.system">
-                <fa-icon icon="edit" size="lg"></fa-icon>
-              </button>
-              <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)" *ngIf="!column.system">
-                <fa-icon icon="trash" size="lg"></fa-icon>
-              </button>
+              @if (!column.system) {
+                <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
+                  <fa-icon icon="edit" size="lg"></fa-icon>
+                </button>
+              }
+              @if (!column.system) {
+                <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)">
+                  <fa-icon icon="trash" size="lg"></fa-icon>
+                </button>
+              }
             </td>
           </ng-container>
 

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -63,6 +63,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditDataTableComponent implements OnInit {
+  private systemService = inject(SystemService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Data Table Form. */
   dataTableForm: UntypedFormGroup;
   /** Data Table Data. */
@@ -144,14 +151,7 @@ export class EditDataTableComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {MatDialog} dialog Dialog Reference.
    */
-  constructor(
-    private systemService: SystemService,
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { dataTable: any; columnCodes: any }) => {
       this.dataTableData = data.dataTable;
 

src/app/system/manage-data-tables/manage-data-tables.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -52,6 +52,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageDataTablesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Data table data. */
   dataTableData: any;
   /** Columns to be displayed in manage data tables table. */
@@ -84,12 +89,7 @@ export class ManageDataTablesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { dataTables: any }) => {
       this.dataTableData = data.dataTables;
     });

src/app/system/manage-data-tables/manage-data-tables.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 ManageDataTablesResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the manage data tables data.

src/app/system/manage-data-tables/view-data-table/view-data-table.component.html

@@ -54,44 +54,48 @@
         {{ 'labels.text.Mandatory' | translate }}
       </th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="!dataTable.isColumnNullable"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="dataTable.isColumnNullable"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (!dataTable.isColumnNullable) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (dataTable.isColumnNullable) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
       </td>
     </ng-container>
 
     <ng-container matColumnDef="isColumnUnique">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Unique' | translate }}</th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="dataTable.isColumnUnique"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="!dataTable.isColumnUnique"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (dataTable.isColumnUnique) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (!dataTable.isColumnUnique) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
       </td>
     </ng-container>
 
@@ -100,22 +104,24 @@
         {{ 'labels.inputs.Indexed' | translate }}
       </th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="dataTable.isColumnIndexed"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="!dataTable.isColumnIndexed"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (dataTable.isColumnIndexed) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (!dataTable.isColumnIndexed) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
       </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/system/manage-data-tables/view-data-table/view-data-table.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, MatSortHeader } from '@angular/material/sort';
@@ -55,6 +55,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewDataTableComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Data Table Data */
   dataTableData: any;
   /** Column Data */
@@ -85,13 +91,7 @@ export class ViewDataTableComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    *  @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { dataTable: any }) => {
       this.dataTableData = data.dataTable;
       this.columnsData = this.dataTableData.columnHeaderData;

src/app/system/manage-external-events/manage-external-events.component.html

@@ -30,8 +30,12 @@
         <td mat-cell *matCellDef="let event">
           <mat-slide-toggle [(ngModel)]="event.enabled" name="{{ event.type }}" (click)="toggleStatus(event)">
             <div [className]="event.enabled ? 'enabled' : 'disabled'">
-              <span *ngIf="event.enabled">{{ 'labels.inputs.Enabled' | translate }}</span>
-              <span *ngIf="!event.enabled">{{ 'labels.inputs.Disabled' | translate }}</span>
+              @if (event.enabled) {
+                <span>{{ 'labels.inputs.Enabled' | translate }}</span>
+              }
+              @if (!event.enabled) {
+                <span>{{ 'labels.inputs.Disabled' | translate }}</span>
+              }
             </div>
           </mat-slide-toggle>
         </td>

src/app/system/manage-external-events/manage-external-events.component.ts

@@ -1,4 +1,4 @@
-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 {
@@ -44,6 +44,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageExternalEventsComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+
   /** Events Data. */
   eventsData: any;
   externalEventConfigurations: any = {};
@@ -63,10 +66,7 @@ export class ManageExternalEventsComponent implements OnInit {
   /** Sorter for reports table. */
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { events: any }) => {
       this.eventsData = data.events.externalEventConfiguration;
     });

src/app/system/manage-external-events/manage-external-events.resolver.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { SystemService } from '../system.service';
@@ -7,10 +7,7 @@ import { SystemService } from '../system.service';
   providedIn: 'root'
 })
 export class ManageExternalEventsResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Configuration data.

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html

@@ -6,40 +6,52 @@
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Grouping' | translate }}</mat-label>
         <mat-select required formControlName="grouping">
-          <mat-option *ngFor="let grouping of data.groupings" [value]="grouping.name">
-            {{ grouping.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (grouping of data.groupings; track grouping) {
+            <mat-option [value]="grouping.name">
+              {{ grouping.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.grouping.hasError('required')">
-          {{ 'labels.inputs.Grouping' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.controls.grouping.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Grouping' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Entity' | translate }}</mat-label>
         <mat-select required formControlName="entity">
-          <mat-option *ngFor="let entity of entityData" [value]="entity.name">
-            {{ entity.name }}
-          </mat-option>
+          @for (entity of entityData; track entity) {
+            <mat-option [value]="entity.name">
+              {{ entity.name }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.entity.hasError('required')">
-          {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.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>
         <mat-label>{{ 'labels.inputs.Select Action' | translate }}</mat-label>
         <mat-select required formControlName="action">
-          <mat-option *ngFor="let action of actionData" [value]="action">
-            {{ action }}
-          </mat-option>
+          @for (action of actionData; track action) {
+            <mat-option [value]="action">
+              {{ action }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.action.hasError('required')">
-          {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.controls.action.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
     </div>
   </form>

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -29,6 +29,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AddEventDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<AddEventDialogComponent>>(MatDialogRef);
+  formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
   /** Event Form. */
   eventForm: UntypedFormGroup;
   /** Entity Data. */
@@ -36,17 +40,6 @@ export class AddEventDialogComponent implements OnInit {
   /** Action Data. */
   actionData: Array<any> = new Array<any>();
 
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {any} data Provides grouping, entities and actions data to fill dropdowns.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<AddEventDialogComponent>,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
-
   /**
    * Creates add event form.
    */

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

@@ -6,94 +6,113 @@
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
             <mat-select required formControlName="name">
-              <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
-                {{ hookTemplate.name | translateKey: 'text' }}
-              </mat-option>
+              @for (hookTemplate of hooksTemplateData.templates; track hookTemplate) {
+                <mat-option [value]="hookTemplate.name">
+                  {{ hookTemplate.name | translateKey: 'text' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
             <input matInput required formControlName="displayName" />
-            <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
-              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.displayName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <div class="layout-row-wrap responsive-column gap-4percent">
-          <mat-form-field class="flex-40" *ngIf="hookForm.controls.name.value === 'Web'">
-            <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
-            <mat-select required formControlName="contentType">
-              <mat-option [value]="'json'">
-                {{ 'labels.inputs.json' | translate }}
-              </mat-option>
-              <mat-option [value]="'form'">
-                {{ 'labels.inputs.form' | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'Web') {
+            <mat-form-field class="flex-40">
+              <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
+              <mat-select required formControlName="contentType">
+                <mat-option [value]="'json'">
+                  {{ 'labels.inputs.json' | translate }}
+                </mat-option>
+                <mat-option [value]="'form'">
+                  {{ 'labels.inputs.form' | translate }}
+                </mat-option>
+              </mat-select>
+              @if (hookForm.controls.contentType.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field class="flex-fill flex-40" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
-            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
-            <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
-            <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'SMS Bridge') {
+            <mat-form-field class="flex-fill flex-40">
+              <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+              <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
+              <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
+              @if (hookForm.controls.phoneNumber.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
             <input matInput required formControlName="payloadUrl" />
-            <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.payloadUrl.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
-        <div
-          class="layout-row-wrap responsive-column gap-4percent"
-          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
-        >
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
-            <input matInput required formControlName="smsProvider" />
-            <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
-              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
-            <input matInput required formControlName="smsProviderAccountId" />
-            <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
-              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
-            <input matInput required formControlName="smsProviderToken" />
-            <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
-              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
+        @if (hookForm.controls.name.value === 'SMS Bridge') {
+          <div class="layout-row-wrap responsive-column gap-4percent">
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+              <input matInput required formControlName="smsProvider" />
+              @if (hookForm.controls.smsProvider.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderAccountId" />
+              @if (hookForm.controls.smsProviderAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderToken" />
+              @if (hookForm.controls.smsProviderToken.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+        }
 
         <br />
 

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -59,6 +59,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateHookComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Hooks Template Data. */
   hooksTemplateData: any;
   /** Hook Form. */
@@ -85,14 +92,7 @@ export class CreateHookComponent implements OnInit {
    * @param {MatDialog} dialog Dialog Reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hooksTemplate: any }) => {
       this.hooksTemplateData = data.hooksTemplate;
     });

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

@@ -6,23 +6,29 @@
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
             <mat-select required formControlName="name">
-              <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
-                {{ hookTemplate.name | translateKey: 'text' }}
-              </mat-option>
+              @for (hookTemplate of hooksTemplateData.templates; track hookTemplate) {
+                <mat-option [value]="hookTemplate.name">
+                  {{ hookTemplate.name | translateKey: 'text' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
             <input matInput required formControlName="displayName" />
-            <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
-              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.displayName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="is-active-wrapper">
@@ -33,73 +39,86 @@
         </div>
 
         <div class="layout-row-wrap responsive-column gap-4percent">
-          <mat-form-field class="flex-fill flex-40" *ngIf="hookForm.controls.name.value === 'Web'">
-            <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
-            <mat-select required formControlName="contentType">
-              <mat-option [value]="'json'">
-                {{ 'labels.inputs.json' | translate }}
-              </mat-option>
-              <mat-option [value]="'form'">
-                {{ 'labels.inputs.form' | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'Web') {
+            <mat-form-field class="flex-fill flex-40">
+              <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
+              <mat-select required formControlName="contentType">
+                <mat-option [value]="'json'">
+                  {{ 'labels.inputs.json' | translate }}
+                </mat-option>
+                <mat-option [value]="'form'">
+                  {{ 'labels.inputs.form' | translate }}
+                </mat-option>
+              </mat-select>
+              @if (hookForm.controls.contentType.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field class="flex-fill flex-40" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
-            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
-            <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
-            <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'SMS Bridge') {
+            <mat-form-field class="flex-fill flex-40">
+              <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+              <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
+              <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
+              @if (hookForm.controls.phoneNumber.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
             <input matInput required formControlName="payloadUrl" />
-            <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.payloadUrl.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
-        <div
-          class="layout-row-wrap responsive-column gap-4percent"
-          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
-        >
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
-            <input matInput required formControlName="smsProvider" />
-            <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
-              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
-            <input matInput required formControlName="smsProviderAccountId" />
-            <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
-              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="flex-30">
-            <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
-            <input matInput required formControlName="smsProviderToken" />
-            <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
-              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
+        @if (hookForm.controls.name.value === 'SMS Bridge') {
+          <div class="layout-row-wrap responsive-column gap-4percent">
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+              <input matInput required formControlName="smsProvider" />
+              @if (hookForm.controls.smsProvider.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderAccountId" />
+              @if (hookForm.controls.smsProviderAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderToken" />
+              @if (hookForm.controls.smsProviderToken.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+        }
 
         <br />
 
@@ -129,9 +148,11 @@
             <td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
           </ng-container>
 
-          <div *ngIf="cannotDeleteLastEvent" class="error-message">
-            <p>At least one event is required. Cannot delete the last event.</p>
-          </div>
+          @if (cannotDeleteLastEvent) {
+            <div class="error-message">
+              <p>At least one event is required. Cannot delete the last event.</p>
+            </div>
+          }
 
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -67,6 +67,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditHookComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private snackBar = inject(MatSnackBar);
+  private cdr = inject(ChangeDetectorRef);
+
   @NgModule({
     imports: [
       MatSnackBarModule
@@ -103,16 +112,7 @@ export class EditHookComponent implements OnInit {
    * @param {MatDialog} dialog Dialog Reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder,
-    private dialog: MatDialog,
-    private translateService: TranslateService,
-    private snackBar: MatSnackBar,
-    private cdr: ChangeDetectorRef
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hooksTemplate: any; hook: any }) => {
       this.hooksTemplateData = data.hooksTemplate;
       this.hookData = data.hook;
@@ -156,7 +156,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProvider: [
         {
@@ -164,7 +163,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProviderAccountId: [
         {
@@ -172,7 +170,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProviderToken: [
         {
@@ -180,7 +177,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       contentType: [
         {
@@ -188,7 +184,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'Web'
         },
         Validators.required
-
       ],
       payloadUrl: [
         this.hookData.name === 'Web' ? this.hookData.config[1].fieldValue : this.hookData.config[0].fieldValue,

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

src/app/system/manage-hooks/manage-hooks.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 {
@@ -47,6 +47,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageHooksComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Hook data. */
   hookData: any;
   /** Columns to be displayed in manage hooks table. */
@@ -67,7 +69,7 @@ export class ManageHooksComponent implements OnInit {
    * Retrieves the hooks data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { hooks: any }) => {
       this.hookData = data.hooks;
     });

src/app/system/manage-hooks/manage-hooks.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 ManageHooksResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the hooks data.

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;
     });

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html

@@ -6,10 +6,12 @@
       }}</span>
     </h2>
   </div>
-  <button mat-raised-button class="activate" (click)="runCatchUp()" *ngIf="!isCatchUpRunning">
-    <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Run Catch-Up' | translate }}
-  </button>
+  @if (!isCatchUpRunning) {
+    <button mat-raised-button class="activate" (click)="runCatchUp()">
+      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Run Catch-Up' | translate }}
+    </button>
+  }
 </div>
 
 <div class="container space-top">

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { SystemService } from 'app/system/system.service';
 import { environment } from '../../../../environments/environment';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -16,6 +16,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CobWorkflowComponent implements OnInit, OnDestroy {
+  private systemService = inject(SystemService);
+
   /** Wait time between API status calls 30 seg */
   waitTime = environment.waitTimeForCOBCatchUp || 30;
   /** Process running flag */
@@ -23,8 +25,6 @@ export class CobWorkflowComponent implements OnInit, OnDestroy {
   /** Timer to refetch COB Catch-Up status every 5 seconds */
   timer: any;
 
-  constructor(private systemService: SystemService) {}
-
   ngOnInit(): void {
     this.getCOBCatchUpStatus();
   }

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html

@@ -1,100 +1,103 @@
-<div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-  <div class="layout-row align-start-center">
-    <div class="search-box flex-40">
-      <mat-form-field class="flex-90">
-        <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)" />
-      </mat-form-field>
+@if (loans && loans.length > 0) {
+  <div class="tab-container mat-typography">
+    <div class="layout-row align-start-center">
+      <div class="search-box flex-40">
+        <mat-form-field class="flex-90">
+          <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)" />
+        </mat-form-field>
+      </div>
+      @if (allowRunInlineJob) {
+        <div class="flex-60">
+          <button
+            mat-raised-button
+            color="success"
+            *mifosxHasPermission="'EXECUTE_INLINE_JOB'"
+            (click)="runInlineCOB()"
+          >
+            <fa-icon icon="play" class="m-r-10"></fa-icon>{{ 'Start inline COB' | translate }}
+          </button>
+        </div>
+      }
     </div>
-    <div class="flex-60" *ngIf="allowRunInlineJob">
-      <button mat-raised-button color="success" *mifosxHasPermission="'EXECUTE_INLINE_JOB'" (click)="runInlineCOB()">
-        <fa-icon icon="play" class="m-r-10"></fa-icon>{{ 'Start inline COB' | translate }}
-      </button>
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+            [aria-label]="checkboxLabel()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+            [aria-label]="checkboxLabel(row)"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="loanId">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
+        <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.loanId }}</td>
+      </ng-container>
+      <ng-container matColumnDef="lockPlacedOn">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Placed On' | translate }}</th>
+        <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockPlacedOn | datetimeFormat }}</td>
+      </ng-container>
+      <ng-container matColumnDef="lockOwner">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Owner' | translate }}</th>
+        <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockOwner }}</td>
+      </ng-container>
+      <ng-container matColumnDef="error">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Error' | translate }}</th>
+        <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.error }}</td>
+      </ng-container>
+      <ng-container matColumnDef="details">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Details' | translate }}</th>
+        <td mat-cell *matCellDef="let loan" class="view-details">
+          <button
+            mat-icon-button
+            class="error-log"
+            matTooltip="{{ 'tooltips.Error details' | translate }}"
+            (click)="showDetails(loan)"
+            matTooltipPosition="left"
+          >
+            <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
+          </button>
+          <button
+            mat-icon-button
+            matTooltip="{{ 'tooltips.View Loan Account' | translate }}"
+            (click)="viewLoanAccount(loan)"
+            matTooltipPosition="right"
+          >
+            <fa-icon icon="eye" size="lg"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
+    </table>
+    <mat-paginator
+      [hidden]="!showPaginator"
+      [pageSizeOptions]="[100, 500, 1000, 5000]"
+      [pageSize]="pageSize"
+      [pageIndex]="currentPage"
+      showFirstLastButtons
+      (page)="changePaging($event)"
+    >
+    </mat-paginator>
+  </div>
+}
+
+@if (loans && loans.length === 0) {
+  <div class="alert">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      {{ 'labels.text.No loan locked available' | translate }}.
     </div>
   </div>
-
-  <table mat-table [dataSource]="dataSource">
-    <ng-container matColumnDef="select">
-      <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox
-          (change)="$event ? masterToggle() : null"
-          [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()"
-          [aria-label]="checkboxLabel()"
-        >
-        </mat-checkbox>
-      </th>
-      <td mat-cell *matCellDef="let row">
-        <mat-checkbox
-          (click)="$event.stopPropagation()"
-          (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)"
-          [aria-label]="checkboxLabel(row)"
-        >
-        </mat-checkbox>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="loanId">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
-      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.loanId }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="lockPlacedOn">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Placed On' | translate }}</th>
-      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockPlacedOn | datetimeFormat }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="lockOwner">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Owner' | translate }}</th>
-      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockOwner }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="error">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Error' | translate }}</th>
-      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.error }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="details">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Details' | translate }}</th>
-      <td mat-cell *matCellDef="let loan" class="view-details">
-        <button
-          mat-icon-button
-          class="error-log"
-          matTooltip="{{ 'tooltips.Error details' | translate }}"
-          (click)="showDetails(loan)"
-          matTooltipPosition="left"
-        >
-          <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
-        </button>
-        <button
-          mat-icon-button
-          matTooltip="{{ 'tooltips.View Loan Account' | translate }}"
-          (click)="viewLoanAccount(loan)"
-          matTooltipPosition="right"
-        >
-          <fa-icon icon="eye" size="lg"></fa-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
-  </table>
-
-  <mat-paginator
-    [hidden]="!showPaginator"
-    [pageSizeOptions]="[100, 500, 1000, 5000]"
-    [pageSize]="pageSize"
-    [pageIndex]="currentPage"
-    showFirstLastButtons
-    (page)="changePaging($event)"
-  >
-  </mat-paginator>
-</div>
-
-<div class="alert" *ngIf="loans && loans.length === 0">
-  <div class="message">
-    <i class="fa fa-exclamation-circle alert-check"></i>
-    {{ 'labels.text.No loan locked available' | translate }}.
-  </div>
-</div>
+}

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.ts

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-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 {
@@ -53,6 +53,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class LoanLockedComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private loansService = inject(LoansService);
+  private systemService = inject(SystemService);
+  private tasksService = inject(TasksService);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Loans Data */
   loans: any[] = [];
   /** Batch Requests */
@@ -89,22 +97,6 @@ export class LoanLockedComponent implements OnInit {
 
   showPaginator = false;
 
-  /**
-   * @param {LoansService} loansService Loans Service
-   * @param {Router} router Router for navigation.
-   * @param {MatDialog} dialog Dialog reference.
-   * @param {TranslateService} translateService Translate Service.
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private loansService: LoansService,
-    private systemService: SystemService,
-    private tasksService: TasksService,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit(): void {
     this.allowRunInlineJob = false;
     this.getLoansLocked(0);

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.resolver.ts

@@ -10,6 +10,7 @@ export class LoanLockedResolver {
   /**
    * @param {TasksService} tasksService Tasks service.
    */
+  // eslint-disable-next-line @angular-eslint/prefer-inject
   constructor(private tasksService: TasksService) {}
 
   /**

src/app/system/manage-jobs/manage-jobs.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatTabChangeEvent, MatTabGroup, MatTab } from '@angular/material/tabs';
 import { SystemService } from '../system.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -21,14 +21,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageJobsComponent {
+  private systemService = inject(SystemService);
+  private translateService = inject(TranslateService);
+
   /** Process running flag */
   isCatchUpRunning = true;
 
-  constructor(
-    private systemService: SystemService,
-    private translateService: TranslateService
-  ) {}
-
   onJobTabChange(event: MatTabChangeEvent) {
     if (event.index === 2) {
       this.systemService.getCOBCatchUpStatus().subscribe((response: any) => {

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html

@@ -2,22 +2,26 @@
 
 <mat-dialog-content>
   <div class="jobs-container">
-    <div *ngFor="let job of selectedJobs">
-      <mifosx-custom-parameters-table
-        [displayName]="job.displayName"
-        [jobId]="job.jobId"
-        [jobParameters]="job.jobParameters"
-        (retrieveData)="runSelectedJobs($event)"
-      >
-      </mifosx-custom-parameters-table>
-    </div>
+    @for (job of selectedJobs; track job) {
+      <div>
+        <mifosx-custom-parameters-table
+          [displayName]="job.displayName"
+          [jobId]="job.jobId"
+          [jobParameters]="job.jobParameters"
+          (retrieveData)="runSelectedJobs($event)"
+        >
+        </mifosx-custom-parameters-table>
+      </div>
+    }
   </div>
 </mat-dialog-content>
 
 <mat-list>
-  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{ green: message.status }">
-    {{ message.message }}
-  </mat-list-item>
+  @for (message of messages; track message) {
+    <mat-list-item class="message" [ngClass]="{ green: message.status }">
+      {{ message.message }}
+    </mat-list-item>
+  }
 </mat-list>
 
 <mat-dialog-actions>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.ts

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, Inject, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChildren, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogTitle,
@@ -71,6 +71,9 @@ interface JobDataType {
   ]
 })
 export class CustomParametersPopoverComponent implements OnInit {
+  private systemService = inject(SystemService);
+  data = inject<SelectedJobsDataType>(MAT_DIALOG_DATA);
+
   /* Job table childer */
   @ViewChildren(CustomParametersTableComponent) tableComponents: QueryList<CustomParametersTableComponent>;
 
@@ -81,11 +84,6 @@ export class CustomParametersPopoverComponent implements OnInit {
   /* API call response message */
   messages: { message: string; status: number }[] = [];
 
-  constructor(
-    private systemService: SystemService,
-    @Inject(MAT_DIALOG_DATA) public data: SelectedJobsDataType
-  ) {}
-
   ngOnInit(): void {
     this.selectedJobs = this.data.selectedJobs.selected.map((jobJSON) => ({
       ...jobJSON,

src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html

@@ -6,19 +6,23 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
             <input matInput required formControlName="displayName" />
-            <mat-error *ngIf="jobForm.controls.displayName.hasError('required')">
-              {{ 'labels.inputs.Job Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (jobForm.controls.displayName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Job Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Cron Expression' | translate }}</mat-label>
             <input matInput required formControlName="cronExpression" />
-            <mat-error *ngIf="jobForm.controls.cronExpression.hasError('required')">
-              {{ 'labels.inputs.Cron Expression' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (jobForm.controls.cronExpression.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Cron Expression' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">

src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -21,6 +21,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditSchedulerJobComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+
   /** Job Data. */
   jobData: any;
   /** Job Form. */
@@ -33,12 +38,7 @@ export class EditSchedulerJobComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { jobSelected: any }) => {
       this.jobData = data.jobSelected;
     });

src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html

@@ -15,9 +15,11 @@
           <div #content class="note-field" [class.show]="show" [class.note-text]="content.scrollHeight > 18">
             <span>{{ job.lastRunHistory.jobRunErrorLog }}</span>
           </div>
-          <button mat-flat-button *ngIf="content.scrollHeight > 18" class="show-button" (click)="show = !show">
-            {{ buttonLabel() }}
-          </button>
+          @if (content.scrollHeight > 18) {
+            <button mat-flat-button class="show-button" (click)="show = !show">
+              {{ buttonLabel() }}
+            </button>
+          }
         </td>
       </tr>
     </tbody>

src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogTitle,
@@ -31,16 +31,14 @@ interface ErrorJobDataType {
   ]
 })
 export class ErrorLogPopoverComponent implements OnInit {
+  data = inject<ErrorJobDataType>(MAT_DIALOG_DATA);
+  private translateService = inject(TranslateService);
+
   show = false;
 
   /* Initialize Selected Job */
   job: SchedulerJob;
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: ErrorJobDataType,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit(): void {
     this.job = this.data.job;
   }

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-job.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 ManageSchedulerJobResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the edit scheduler jobs data.

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -6,14 +6,18 @@
       }}</span>
     </h2>
   </div>
-  <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
-    <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Suspend' | translate }}
-  </button>
-  <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
-    <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Activate' | translate }}
-  </button>
+  @if (schedulerActive) {
+    <button mat-raised-button class="suspend" (click)="suspendScheduler()">
+      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Suspend' | translate }}
+    </button>
+  }
+  @if (!schedulerActive) {
+    <button mat-raised-button class="activate" (click)="activateScheduler()">
+      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Activate' | translate }}
+    </button>
+  }
 </div>
 
 <div class="container">
@@ -52,14 +56,15 @@
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox
-            class="m-r-10"
-            *ngIf="!row.currentlyRunning"
-            (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection.isSelected(row)"
-          >
-          </mat-checkbox>
+          @if (!row.currentlyRunning) {
+            <mat-checkbox
+              class="m-r-10"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+            >
+            </mat-checkbox>
+          }
         </td>
       </ng-container>
 
@@ -85,27 +90,31 @@
       <ng-container matColumnDef="previousRunTime">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Previous Run' | translate }}</th>
         <td mat-cell *matCellDef="let job">
-          <div *ngIf="job.lastRunHistory">
-            <fa-icon
-              *ngIf="job.lastRunHistory.status === 'success'"
-              class="success"
-              [matTooltip]="'tooltips.Successful' | translate"
-              matTooltipPosition="right"
-              icon="check-circle"
-              size="lg"
-            ></fa-icon>
-            <fa-icon
-              *ngIf="!(job.lastRunHistory.status === 'success')"
-              class="fail"
-              [matTooltip]="'tooltips.Failed' | translate"
-              matTooltipPosition="right"
-              icon="times-circle"
-              size="lg"
-            ></fa-icon>
-            <span *ngIf="job.lastRunHistory" class="m-l-5">
-              {{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</span
-            >
-          </div>
+          @if (job.lastRunHistory) {
+            <div>
+              @if (job.lastRunHistory.status === 'success') {
+                <fa-icon
+                  class="success"
+                  [matTooltip]="'tooltips.Successful' | translate"
+                  matTooltipPosition="right"
+                  icon="check-circle"
+                  size="lg"
+                ></fa-icon>
+              }
+              @if (!(job.lastRunHistory.status === 'success')) {
+                <fa-icon
+                  class="fail"
+                  [matTooltip]="'tooltips.Failed' | translate"
+                  matTooltipPosition="right"
+                  icon="times-circle"
+                  size="lg"
+                ></fa-icon>
+              }
+              @if (job.lastRunHistory) {
+                <span class="m-l-5"> {{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</span>
+              }
+            </div>
+          }
         </td>
       </ng-container>
 
@@ -131,16 +140,17 @@
       <ng-container matColumnDef="errorLog">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
-          <button
-            mat-icon-button
-            class="errorlog"
-            (click)="showErrorLog(job)"
-            *ngIf="jobWithError(job)"
-            matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
-            matTooltipPosition="right"
-          >
-            <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
-          </button>
+          @if (jobWithError(job)) {
+            <button
+              mat-icon-button
+              class="errorlog"
+              (click)="showErrorLog(job)"
+              matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
+              matTooltipPosition="right"
+            >
+              <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
+            </button>
+          }
         </td>
       </ng-container>
 

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -32,7 +32,7 @@ import { CustomParametersPopoverComponent } from './custom-parameters-popover/cu
 import { SchedulerJob } from './models/scheduler-job.model';
 import { ErrorLogPopoverComponent } from './error-log-popover/error-log-popover.component';
 import { RunSelectedJobsPopoverComponent } from './run-selected-jobs-popover/run-selected-jobs-popover.component';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -73,6 +73,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Jobs data. */
   jobData: any;
   /** Scheduler data */
@@ -118,14 +125,7 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private dialog: MatDialog,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { jobsScheduler: any }) => {
       if (data.jobsScheduler) {
         this.jobData = data.jobsScheduler[0];