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
@@ -14,10 +14,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateRecurringDepositsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateRecurringDepositsAccountForm.controls.activatedOnDate.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 ActivateRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  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 ActivateRecurringDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SavingsService} savingsService Savings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
  }

@@ -6,91 +6,102 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
            <mat-select required formControlName="chargeId">
-              <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
-                {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
-              </mat-option>
+              @for (savingsCharge of savingsChargeOptions; track savingsCharge) {
+                <mat-option [value]="savingsCharge.id">
+                  {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="recurringDepositsChargeForm.controls.chargeId.hasError('required')">
-              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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 (recurringDepositsChargeForm.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,
@@ -28,6 +28,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AddChargeRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum Due Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Due Date allowed. */
@@ -49,14 +56,7 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
   * @param {Dates} dateUtils Date Utils
   * @param {SavingsService} savingsService Savings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { recurringDepositsAccountActionData: any }) => {
      this.savingsChargeOptions = data.recurringDepositsAccountActionData.chargeOptions;
    });
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #approvedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="approveRecurringDepositsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (approveRecurringDepositsAccountForm.controls.approvedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Approved On 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 ApproveRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  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 ApproveRecurringDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
  }

@@ -17,106 +17,123 @@
            />
            <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeRecurringDepositForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Closed On' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeRecurringDepositForm.controls.closedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closed On' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
            <input matInput required formControlName="maturityAmount" />
-            <mat-error *ngIf="closeRecurringDepositForm.controls.maturityAmount.hasError('required')">
-              {{ 'labels.inputs.Maturity Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeRecurringDepositForm.controls.maturityAmount.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Maturity Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
            <mat-select formControlName="onAccountClosureId" required>
-              <mat-option
-                *ngFor="let onAccountClosureOption of onAccountClosureOptions"
-                [value]="onAccountClosureOption.id"
-              >
-                {{ onAccountClosureOption.value }}
-              </mat-option>
+              @for (onAccountClosureOption of onAccountClosureOptions; track onAccountClosureOption) {
+                <mat-option [value]="onAccountClosureOption.id">
+                  {{ onAccountClosureOption.value }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="closeRecurringDepositForm.controls.onAccountClosureId.hasError('required')">
-              {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeRecurringDepositForm.controls.onAccountClosureId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <mat-form-field *ngIf="closeRecurringDepositForm.contains('toSavingsAccountId')">
-            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
-            <mat-select required formControlName="toSavingsAccountId">
-              <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-                {{ account.accountNo }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="closeRecurringDepositForm.controls.toSavingsAccountId.hasError('required')">
-              {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (closeRecurringDepositForm.contains('toSavingsAccountId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
+              <mat-select required formControlName="toSavingsAccountId">
+                @for (account of savingsAccountsData; track account) {
+                  <mat-option [value]="account.id">
+                    {{ account.accountNo }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (closeRecurringDepositForm.controls.toSavingsAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="closeRecurringDepositForm.contains('transferDescription')">
-            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
-            <input matInput formControlName="transferDescription" />
-          </mat-form-field>
+          @if (closeRecurringDepositForm.contains('transferDescription')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+              <input matInput formControlName="transferDescription" />
+            </mat-form-field>
+          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Payment Type Id' | translate }}</mat-label>
            <mat-select formControlName="paymentTypeId" required>
-              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-                {{ paymentType.name }}
-              </mat-option>
+              @for (paymentType of paymentTypes; track paymentType) {
+                <mat-option [value]="paymentType.id">
+                  {{ paymentType.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="closeRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeRecurringDepositForm.controls.paymentTypeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <div class="flex-fill">
            <span class="flex-25"> {{ 'labels.inputs.Show Payment Details' | translate }}</span>
            <span class="expandcollapsebutton flex-75" (click)="toggleDisplay()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+              @if (showPaymentDetails) {
+                <button mat-raised-button color="primary">
+                  <i class="fa fa-minus"></i>
+                </button>
+              }
+              @if (!showPaymentDetails) {
+                <button mat-raised-button color="primary">
+                  <i class="fa fa-plus"></i>
+                </button>
+              }
            </span>
          </div>

-          <ng-container *ngIf="showPaymentDetails">
+          @if (showPaymentDetails) {
            <mat-form-field>
              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
              <input matInput formControlName="accountNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
              <input matInput formControlName="chequeNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
              <input matInput formControlName="routingCode" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
              <input matInput formControlName="receiptNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
              <input matInput formControlName="bankNumber" />
            </mat-form-field>
-          </ng-container>
+          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CloseRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
  /** Maturity Amount */
  maturityAmount: any;
  /** On Account Closure Options */
@@ -58,14 +65,7 @@ export class CloseRecurringDepositsAccountComponent implements OnInit {
   * @param {Dates} dateUtils Date Utils
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { recurringDepositsAccountActionData: any }) => {
      this.savingsAccountsData = data.recurringDepositsAccountActionData.savingsAccounts;
      this.maturityAmount = data.recurringDepositsAccountActionData.maturityAmount;
@@ -1,8 +1,10 @@
 <div class="container">
  <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">
-      {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Recurring Deposit Transactions' | translate }}
-    </h2>
+    @if (transactionType.withdrawal) {
+      <h2 mat-title>
+        {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Recurring Deposit Transactions' | translate }}
+      </h2>
+    }

    <form [formGroup]="depositRecurringDepositForm" (ngSubmit)="submit()">
      <mat-card-content>
@@ -19,10 +21,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #transactionDatePicker></mat-datepicker>
-            <mat-error *ngIf="depositRecurringDepositForm.controls.transactionDate.hasError('required')">
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (depositRecurringDepositForm.controls.transactionDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mifosx-input-amount
@@ -36,14 +40,18 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Payment Type Id' | translate }}</mat-label>
            <mat-select formControlName="paymentTypeId" required>
-              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-                {{ paymentType.name }}
-              </mat-option>
+              @for (paymentType of paymentTypes; track paymentType) {
+                <mat-option [value]="paymentType.id">
+                  {{ paymentType.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="depositRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (depositRecurringDepositForm.controls.paymentTypeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <div class="flex-fill">
@@ -56,32 +64,28 @@
            </span>
          </div>

-          <ng-container *ngIf="showPaymentDetails">
+          @if (showPaymentDetails) {
            <mat-form-field>
              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
              <input matInput formControlName="accountNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
              <input matInput formControlName="checkNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
              <input matInput formControlName="routingCode" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
              <input matInput formControlName="receiptNumber" />
            </mat-form-field>
-
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
              <input matInput formControlName="bankNumber" />
            </mat-form-field>
-          </ng-container>
+          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -35,6 +35,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class DepositRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
  @Input() currency: Currency;

  /** Transactions Amount */
@@ -67,14 +74,7 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
   * @param {Dates} dateUtils Date Utils
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { recurringDepositsAccountActionData: any }) => {
      this.transactionAmount = data.recurringDepositsAccountActionData.amount;
      this.paymentTypes = data.recurringDepositsAccountActionData.paymentTypeOptions;
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="prematureCloseRecurringDepositsAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (prematureCloseRecurringDepositsAccountForm.controls.closedOnDate.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>
        </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';

@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  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. */
@@ -39,14 +46,7 @@ export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
  }

@@ -1,20 +1,27 @@
-<mifosx-activate-recurring-deposits-account *ngIf="actions['Activate']"></mifosx-activate-recurring-deposits-account>
-<mifosx-undo-approval-recurring-deposits-account
-  *ngIf="actions['Undo Approval'] || actions['Undo Activation']"
-></mifosx-undo-approval-recurring-deposits-account>
-<mifosx-approve-recurring-deposits-account *ngIf="actions['Approve']"></mifosx-approve-recurring-deposits-account>
-<mifosx-reject-recurring-deposits-account *ngIf="actions['Reject']"></mifosx-reject-recurring-deposits-account>
-<mifosx-withdraw-by-client-recurring-deposits-account
-  *ngIf="actions['Withdrawn by Client']"
-></mifosx-withdraw-by-client-recurring-deposits-account>
-<mifosx-add-charge-recurring-deposits-account
-  *ngIf="actions['Add Charge']"
-></mifosx-add-charge-recurring-deposits-account>
-<mifosx-premature-close-recurring-deposit-account
-  *ngIf="actions['Premature Close']"
-></mifosx-premature-close-recurring-deposit-account>
-<mifosx-close-recurring-deposits-account *ngIf="actions['Close']"></mifosx-close-recurring-deposits-account>
-<mifosx-deposit-recurring-deposits-account
-  [currency]="currency"
-  *ngIf="actions['Deposit'] || actions['Withdrawal']"
-></mifosx-deposit-recurring-deposits-account>
+@if (actions['Activate']) {
+  <mifosx-activate-recurring-deposits-account></mifosx-activate-recurring-deposits-account>
+}
+@if (actions['Undo Approval'] || actions['Undo Activation']) {
+  <mifosx-undo-approval-recurring-deposits-account></mifosx-undo-approval-recurring-deposits-account>
+}
+@if (actions['Approve']) {
+  <mifosx-approve-recurring-deposits-account></mifosx-approve-recurring-deposits-account>
+}
+@if (actions['Reject']) {
+  <mifosx-reject-recurring-deposits-account></mifosx-reject-recurring-deposits-account>
+}
+@if (actions['Withdrawn by Client']) {
+  <mifosx-withdraw-by-client-recurring-deposits-account></mifosx-withdraw-by-client-recurring-deposits-account>
+}
+@if (actions['Add Charge']) {
+  <mifosx-add-charge-recurring-deposits-account></mifosx-add-charge-recurring-deposits-account>
+}
+@if (actions['Premature Close']) {
+  <mifosx-premature-close-recurring-deposit-account></mifosx-premature-close-recurring-deposit-account>
+}
+@if (actions['Close']) {
+  <mifosx-close-recurring-deposits-account></mifosx-close-recurring-deposits-account>
+}
+@if (actions['Deposit'] || actions['Withdrawal']) {
+  <mifosx-deposit-recurring-deposits-account [currency]="currency"></mifosx-deposit-recurring-deposits-account>
+}
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Currency } from 'app/shared/models/general.model';
 import { ActivateRecurringDepositsAccountComponent } from './activate-recurring-deposits-account/activate-recurring-deposits-account.component';
@@ -30,6 +30,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class RecurringDepositsAccountActionsComponent {
+  private route = inject(ActivatedRoute);
+
  /** Flag object to store possible actions and render appropriate UI to the user */
  actions: {
    Activate: boolean;
@@ -62,7 +64,7 @@ export class RecurringDepositsAccountActionsComponent {
  /**
   * @param {ActivatedRoute} route Activated Route
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.route.data.subscribe((data: { recurringDepositsAccountActionData: any }) => {
      if (data.recurringDepositsAccountActionData) {
        this.currency = data.recurringDepositsAccountActionData.currency;
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="rejectRecurringDepositsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectRecurringDepositsAccountForm.controls.rejectedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Rejected On 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 RejectRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  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 RejectRecurringDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
  }

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

@@ -21,6 +21,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class UndoApprovalRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Undo Approval Recurring Deposits Account form. */
  undoApprovalRecurringDepositsAccountForm: UntypedFormGroup;
  /** Recurring Deposits Account Id */
@@ -35,12 +40,7 @@ export class UndoApprovalRecurringDepositsAccountComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.undoCommand = 'undoapproval'; // Default command
    this.undoAction = this.route.snapshot.params['name'];
    if (this.undoAction === 'Undo Activation') {
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="withdrawRecurringDepositsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawRecurringDepositsAccountForm.controls.withdrawnOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Withdrawn On 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';
 import { Dates } from 'app/core/utils/dates';
@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  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. */
@@ -39,14 +46,7 @@ export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
  }