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.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AcceptClientTransferComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Accept Client Transfer form. */
  acceptClientTransferForm: UntypedFormGroup;
  /** Client Id */
@@ -38,14 +45,7 @@ export class AcceptClientTransferComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.transferDate = data.clientActionData;
    });
@@ -14,10 +14,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #activationDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateClientForm.controls.activationDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
        </mat-form-field>
      </mat-card-content>

@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ActivateClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -38,14 +45,7 @@ export class ActivateClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.clientId = this.route.parent.snapshot.params['clientId'];
  }

@@ -6,88 +6,102 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
            <mat-select required formControlName="chargeId">
-              <mat-option *ngFor="let clientCharge of clientChargeOptions" [value]="clientCharge.id">
-                {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
-              </mat-option>
+              @for (clientCharge of clientChargeOptions; track clientCharge) {
+                <mat-option [value]="clientCharge.id">
+                  {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (clientChargeForm.controls.chargeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <div *ngIf="chargeDetails" class="layout-column">
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-              <input type="number" required matInput formControlName="amount" />
-              <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
-              <mat-select formControlName="chargeCalculationType">
-                <mat-option
-                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id"
-                >
-                  {{ chargeCalculation.value }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
-              <mat-select formControlName="chargeTimeType">
-                <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
-                  {{ chargeTime.value }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
-              <input
-                matInput
-                [min]="minDate"
-                [max]="maxDate"
-                [matDatepicker]="dueDatePicker"
-                required
-                formControlName="dueDate"
-              />
-              <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-              <mat-datepicker #dueDatePicker></mat-datepicker>
-              <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
-              <input
-                matInput
-                [min]="minDate"
-                [max]="maxDate"
-                [matDatepicker]="feeOnMonthDayPicker"
-                required
-                formControlName="feeOnMonthDay"
-              />
-              <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
-              <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
-              <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field *ngIf="clientChargeForm.contains('feeInterval')">
-              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
-              <input matInput formControlName="feeInterval" />
-            </mat-form-field>
-          </div>
+          @if (chargeDetails) {
+            <div class="layout-column">
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+                <input type="number" required matInput formControlName="amount" />
+                @if (clientChargeForm.controls.amount.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
+                <mat-select formControlName="chargeCalculationType">
+                  @for (chargeCalculation of chargeDetails.chargeCalculationTypeOptions; track chargeCalculation) {
+                    <mat-option [value]="chargeCalculation.id">
+                      {{ chargeCalculation.value }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
+                <mat-select formControlName="chargeTimeType">
+                  @for (chargeTime of chargeDetails.chargeTimeTypeOptions; track chargeTime) {
+                    <mat-option [value]="chargeTime.id">
+                      {{ chargeTime.value }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              @if (clientChargeForm.contains('dueDate')) {
+                <mat-form-field (click)="dueDatePicker.open()">
+                  <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="dueDatePicker"
+                    required
+                    formControlName="dueDate"
+                  />
+                  <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+                  <mat-datepicker #dueDatePicker></mat-datepicker>
+                  @if (clientChargeForm.controls.dueDate.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (clientChargeForm.contains('feeOnMonthDay')) {
+                <mat-form-field (click)="feeOnMonthDayPicker.open()">
+                  <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="feeOnMonthDayPicker"
+                    required
+                    formControlName="feeOnMonthDay"
+                  />
+                  <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
+                  <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
+                  @if (clientChargeForm.controls.feeOnMonthDay.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (clientChargeForm.contains('feeInterval')) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
+                  <input matInput formControlName="feeInterval" />
+                </mat-form-field>
+              }
+            </div>
+          }
        </div>

        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -27,6 +27,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AddClientChargeComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum Due Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Due Date allowed. */
@@ -49,14 +56,7 @@ export class AddClientChargeComponent implements OnInit {
   * @param {ClientsService} clientsService Clients Service
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.clientChargeOptions = data.clientActionData.chargeOptions;
    });
@@ -6,61 +6,62 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
            <mat-select required formControlName="collateralId">
-              <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
-                {{ clientCollateral.name }}
-              </mat-option>
+              @for (clientCollateral of clientCollateralOptions; track clientCollateral) {
+                <mat-option [value]="clientCollateral.id">
+                  {{ clientCollateral.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-              {{ 'labels.inputs.Collateral' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <div *ngIf="collateralDetails" class="layout-column">
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-              <input matInput required formControlName="name" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
-              <input matInput required formControlName="quality" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
-              <input matInput required formControlName="unitType" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
-              <input matInput required formControlName="basePrice" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Percentage To Base' | translate }}</mat-label>
-              <input matInput required formControlName="pctToBase" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
-              <input matInput required formControlName="quantity" />
-              <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+            @if (clientCollateralForm.controls.collateralId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Collateral' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
-            </mat-form-field>
+            }
+          </mat-form-field>

-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
-              <input matInput required formControlName="totalValue" />
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
-              <input matInput required formControlName="totalCollateralValue" />
-            </mat-form-field>
-          </div>
+          @if (collateralDetails) {
+            <div class="layout-column">
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+                <input matInput required formControlName="name" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
+                <input matInput required formControlName="quality" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
+                <input matInput required formControlName="unitType" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
+                <input matInput required formControlName="basePrice" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Percentage To Base' | translate }}</mat-label>
+                <input matInput required formControlName="pctToBase" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
+                <input matInput required formControlName="quantity" />
+                @if (clientCollateralForm.controls.quantity.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
+                <input matInput required formControlName="totalValue" />
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
+                <input matInput required formControlName="totalCollateralValue" />
+              </mat-form-field>
+            </div>
+          }
        </div>
      </mat-card-content>

@@ -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';

@@ -20,6 +20,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AddClientCollateralComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private productsService = inject(ProductsService);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+
  /** Client Collateral Form */
  clientCollateralForm: UntypedFormGroup;
  /** Client Collateral Options */
@@ -36,14 +43,7 @@ export class AddClientCollateralComponent implements OnInit {
   * @param {Router} router Router.
   * @param {ProductsService} productsService Products Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private productsService: ProductsService,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.clientCollateralOptions = data.clientActionData;
    });
@@ -1,17 +1,51 @@
-<mifosx-client-assign-staff *ngIf="actions['Assign Staff']"></mifosx-client-assign-staff>
-<mifosx-close-client *ngIf="actions['Close']"></mifosx-close-client>
-<mifosx-view-survey *ngIf="actions['Survey']"></mifosx-view-survey>
-<mifosx-reject-client *ngIf="actions['Reject']"></mifosx-reject-client>
-<mifosx-activate-client *ngIf="actions['Activate']"></mifosx-activate-client>
-<mifosx-withdraw-client *ngIf="actions['Withdraw']"></mifosx-withdraw-client>
-<mifosx-update-client-savings-account *ngIf="actions['Update Default Savings']"></mifosx-update-client-savings-account>
-<mifosx-transfer-client *ngIf="actions['Transfer Client']"></mifosx-transfer-client>
-<mifosx-undo-client-transfer *ngIf="actions['Undo Transfer']"></mifosx-undo-client-transfer>
-<mifosx-reject-client-transfer *ngIf="actions['Reject Transfer']"></mifosx-reject-client-transfer>
-<mifosx-accept-client-transfer *ngIf="actions['Accept Transfer']"></mifosx-accept-client-transfer>
-<mifosx-reactivate-client *ngIf="actions['Reactivate']"></mifosx-reactivate-client>
-<mifosx-undo-client-rejection *ngIf="actions['Undo Rejection']"></mifosx-undo-client-rejection>
-<mifosx-add-client-charge *ngIf="actions['Add Charge']"></mifosx-add-client-charge>
-<mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
-<mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
-<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>
+@if (actions['Assign Staff']) {
+  <mifosx-client-assign-staff></mifosx-client-assign-staff>
+}
+@if (actions['Close']) {
+  <mifosx-close-client></mifosx-close-client>
+}
+@if (actions['Survey']) {
+  <mifosx-view-survey></mifosx-view-survey>
+}
+@if (actions['Reject']) {
+  <mifosx-reject-client></mifosx-reject-client>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-client></mifosx-activate-client>
+}
+@if (actions['Withdraw']) {
+  <mifosx-withdraw-client></mifosx-withdraw-client>
+}
+@if (actions['Update Default Savings']) {
+  <mifosx-update-client-savings-account></mifosx-update-client-savings-account>
+}
+@if (actions['Transfer Client']) {
+  <mifosx-transfer-client></mifosx-transfer-client>
+}
+@if (actions['Undo Transfer']) {
+  <mifosx-undo-client-transfer></mifosx-undo-client-transfer>
+}
+@if (actions['Reject Transfer']) {
+  <mifosx-reject-client-transfer></mifosx-reject-client-transfer>
+}
+@if (actions['Accept Transfer']) {
+  <mifosx-accept-client-transfer></mifosx-accept-client-transfer>
+}
+@if (actions['Reactivate']) {
+  <mifosx-reactivate-client></mifosx-reactivate-client>
+}
+@if (actions['Undo Rejection']) {
+  <mifosx-undo-client-rejection></mifosx-undo-client-rejection>
+}
+@if (actions['Add Charge']) {
+  <mifosx-add-client-charge></mifosx-add-client-charge>
+}
+@if (actions['Take Survey']) {
+  <mifosx-take-survey></mifosx-take-survey>
+}
+@if (actions['Client Screen Reports']) {
+  <mifosx-client-screen-reports></mifosx-client-screen-reports>
+}
+@if (actions['Create Collateral']) {
+  <mifosx-add-client-collateral></mifosx-add-client-collateral>
+}
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ClientAssignStaffComponent } from './client-assign-staff/client-assign-staff.component';
 import { CloseClientComponent } from './close-client/close-client.component';
@@ -49,6 +49,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ClientActionsComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Flag object to store possible actions and render appropriate UI to the user */
  actions: {
    'Assign Staff': boolean;
@@ -92,10 +95,7 @@ export class ClientActionsComponent {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    const name = this.route.snapshot.params['name'] as keyof typeof this.actions;
    this.actions[name] = true;
@@ -6,14 +6,18 @@
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
            <mat-select formControlName="staffId">
-              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                {{ staff.displayName }}
-              </mat-option>
+              @for (staff of staffData; track staff) {
+                <mat-option [value]="staff.id">
+                  {{ staff.displayName }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (clientAssignStaffForm.controls.staffId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, 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 ClientAssignStaffComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Client Assign Staff form. */
  clientAssignStaffForm: UntypedFormGroup;
  /** Staff Data */
@@ -33,12 +38,7 @@ export class ClientAssignStaffComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.clientData = data.clientActionData;
    });
@@ -6,14 +6,18 @@
          <mat-form-field class="flex-fill">
            <mat-label>{{ 'labels.inputs.Client Screen Reports' | translate }}</mat-label>
            <mat-select formControlName="templateId">
-              <mat-option *ngFor="let template of templatesData" [value]="template.id">
-                {{ template.name }}
-              </mat-option>
+              @for (template of templatesData; track template) {
+                <mat-option [value]="template.id">
+                  {{ template.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              {{ 'labels.inputs.Screen Report' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (clientScreenReportForm.controls.templateId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Screen Report' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext } from '@angular/core';
+import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

@@ -22,6 +22,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ClientScreenReportsComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private route = inject(ActivatedRoute);
+  private sanitizer = inject(DomSanitizer);
+  private renderer = inject(Renderer2);
+
  /** Client Screen Reportform. */
  clientScreenReportForm: UntypedFormGroup;
  /** Templates Data */
@@ -42,13 +48,7 @@ export class ClientScreenReportsComponent implements OnInit {
   * @param {DomSanitizer} sanitizer DOM Sanitizer
   * @param {Renderer2} renderer Renderer 2
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private route: ActivatedRoute,
-    private sanitizer: DomSanitizer,
-    private renderer: Renderer2
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.templatesData = data.clientActionData;
    });
@@ -15,23 +15,29 @@
            />
            <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closureDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeClientForm.controls.closureDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
            <mat-select formControlName="closureReasonId">
-              <mat-option *ngFor="let reason of closureData" [value]="reason.id">
-                {{ reason.name }}
-              </mat-option>
+              @for (reason of closureData; track reason) {
+                <mat-option [value]="reason.id">
+                  {{ reason.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeClientForm.controls.closureReasonId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CloseClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class CloseClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.closureData = data.clientActionData.narrations;
    });
@@ -14,10 +14,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #reactivationDatePicker></mat-datepicker>
-          <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-            {{ 'labels.inputs.Reactivation Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (reactivateClientForm.controls.reactivationDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Reactivation Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
        </mat-form-field>
      </mat-card-content>

@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ReactivateClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -38,14 +45,7 @@ export class ReactivateClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.clientId = this.route.parent.snapshot.params['clientId'];
  }

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class RejectClientTransferComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Reject Client Transfer form. */
  rejectClientTransferForm: UntypedFormGroup;
  /** Client Id */
@@ -36,14 +43,7 @@ export class RejectClientTransferComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.transferDate = data.clientActionData;
    });
@@ -15,23 +15,29 @@
            />
            <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #rejectionDatePicker></mat-datepicker>
-            <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              {{ 'labels.inputs.Rejection Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectClientForm.controls.rejectionDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Rejection Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Rejection Reason' | translate }}</mat-label>
            <mat-select formControlName="rejectionReasonId">
-              <mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
-                {{ reason.name }}
-              </mat-option>
+              @for (reason of rejectionData; track reason) {
+                <mat-option [value]="reason.id">
+                  {{ reason.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              {{ 'labels.inputs.Rejection Reason' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectClientForm.controls.rejectionReasonId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Rejection Reason' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class RejectClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class RejectClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.rejectionData = data.clientActionData.narrations;
    });
@@ -3,42 +3,41 @@
    <div class="survey-select layout-row">
      <mat-label class="name-label">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
      <mat-select (selectionChange)="onSurveyChange($event)">
-        <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
-          {{ surveyData.name }}
-        </mat-option>
+        @for (surveyData of allSurveyData; track surveyData) {
+          <mat-option [value]="surveyData">
+            {{ surveyData.name }}
+          </mat-option>
+        }
      </mat-select>
    </div>

    <hr />

    <div>
-      <ng-container *ngFor="let component of componentGroups">
-        <h2 *ngIf="component[0].componentKey">component[0].componentKey</h2>
-
+      @for (component of componentGroups; track component) {
+        @if (component[0].componentKey) {
+          <h2>component[0].componentKey</h2>
+        }
        <div class="layout-column display-questions">
-          <ng-container *ngFor="let question of component">
+          @for (question of component; track question) {
            <div class="layout-row question">
              <mat-label class="flex-40 question-text">{{ question.text }}</mat-label>
-
              <mat-radio-group class="flex-60 radio-group-spacing" [(ngModel)]="question.answer">
-                <mat-radio-button
-                  class="layout-column radio-button"
-                  *ngFor="let options of question.responseDatas"
-                  [value]="options"
-                >
-                  <span class="wrap-mat-radio-label">
-                    {{ options.text }}
-                  </span>
-                </mat-radio-button>
+                @for (options of question.responseDatas; track options) {
+                  <mat-radio-button class="layout-column radio-button" [value]="options">
+                    <span class="wrap-mat-radio-label">
+                      {{ options.text }}
+                    </span>
+                  </mat-radio-button>
+                }
              </mat-radio-group>
            </div>
-
-            <div *ngIf="question.answer">
-              {{ 'labels.text.Your answer is' | translate }}: {{ question.answer.text }}
-            </div>
-          </ng-container>
+            @if (question.answer) {
+              <div>{{ 'labels.text.Your answer is' | translate }}: {{ question.answer.text }}</div>
+            }
+          }
        </div>
-      </ng-container>
+      }
    </div>

    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

 /** Custom Services */
@@ -24,6 +24,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class TakeSurveyComponent {
+  private route = inject(ActivatedRoute);
+  private clientsService = inject(ClientsService);
+  private router = inject(Router);
+  private authenticationService = inject(AuthenticationService);
+
  /** List of all Survey Data */
  allSurveyData: any;
  /** User Id */
@@ -52,12 +57,7 @@ export class TakeSurveyComponent {
   * @param {Router} router Router
   * @param {AuthenticationService} authenticationService AuthenticationService
   */
-  constructor(
-    private route: ActivatedRoute,
-    private clientsService: ClientsService,
-    private router: Router,
-    private authenticationService: AuthenticationService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.allSurveyData = data.clientActionData;
      this.clientId = this.route.parent.snapshot.params['clientId'];
@@ -6,14 +6,18 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
            <mat-select required formControlName="destinationOfficeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (transferClientForm.controls.destinationOfficeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field (click)="transferDatePicker.open()">
@@ -28,10 +32,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #transferDatePicker></mat-datepicker>
-            <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              {{ 'labels.inputs.Transfer Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (transferClientForm.controls.transferDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Transfer Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
@@ -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';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class TransferClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -42,14 +49,7 @@ export class TransferClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.officeData = data.clientActionData;
    });
@@ -14,10 +14,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #reopenedDatePicker></mat-datepicker>
-          <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-            {{ 'labels.inputs.Reopened On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (undoClientRejectionForm.controls.reopenedDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Reopened On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
        </mat-form-field>
      </mat-card-content>

@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class UndoClientRejectionComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -37,14 +44,7 @@ export class UndoClientRejectionComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.clientId = this.route.parent.snapshot.params['clientId'];
  }

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class UndoClientTransferComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Undo Client Transfer form. */
  undoClientTransferForm: UntypedFormGroup;
  /** Client Id */
@@ -36,14 +43,7 @@ export class UndoClientTransferComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.transferDate = data.clientActionData;
    });
@@ -6,14 +6,18 @@
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
            <mat-select formControlName="savingsAccountId">
-              <mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
-                {{ account.accountNo }}
-              </mat-option>
+              @for (account of savingsAccounts; track account) {
+                <mat-option [value]="account.id">
+                  {{ account.accountNo }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (clientSavingsAccountForm.controls.savingsAccountId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, 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 UpdateClientSavingsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Client Update Savings Account form. */
  clientSavingsAccountForm: UntypedFormGroup;
  /** Savings Accounts Data */
@@ -33,12 +38,7 @@ export class UpdateClientSavingsAccountComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.clientData = data.clientActionData;
    });
@@ -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';
@@ -49,6 +49,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewSurveyComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
  /** Survey Data */
  surveyData: any;
  /** Data source for view surveys table. */
@@ -70,7 +72,7 @@ export class ViewSurveyComponent implements OnInit {
   * Retrieves the survey data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.surveyData = data.clientActionData;
    });
@@ -15,23 +15,29 @@
            />
            <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #withdrawalDatePicker></mat-datepicker>
-            <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              {{ 'labels.inputs.Withdrawal Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawClientForm.controls.withdrawalDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Withdrawal Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Withdrawal Reason' | translate }}</mat-label>
            <mat-select formControlName="withdrawalReasonId">
-              <mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
-                {{ reason.name }}
-              </mat-option>
+              @for (reason of withdrawalData; track reason) {
+                <mat-option [value]="reason.id">
+                  {{ reason.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              {{ 'labels.inputs.Withdrawal Reason' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawClientForm.controls.withdrawalReasonId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Withdrawal Reason' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -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';

@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class WithdrawClientComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private clientsService = inject(ClientsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class WithdrawClientComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private clientsService: ClientsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientActionData: any }) => {
      this.withdrawalData = data.clientActionData.narrations;
    });