Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-actions.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -14,14 +14,8 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountActionsResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
-   */
-  constructor(
-    private savingsService: SavingsService,
-    private recurringDepositsService: RecurringDepositsService
-  ) {}
+  private savingsService = inject(SavingsService);
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the Recurring deposits account actions data.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-and-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountAndTemplateResolver {
-  /**
-   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the Recurring Deposits Account Template.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-transaction-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountTransactionTemplateResolver {
-  /**
-   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the Recurring Deposits Account Transaction data.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-transaction.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountTransactionResolver {
-  /**
-   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the Recurring Deposits Account Transaction data.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposits-account-data.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountDataResolver {
-  /**
-   * @param {RecurringDepositsService} RecurringDepositsService RecurringDeposits service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the RecurringDeposits Account data.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposits-account-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountTemplateResolver {
-  /**
-   * @param {recurringDepositsService} RecurringDepositsService Savings service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the Shares Account Template.

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposits-account-view.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { RecurringDepositsService } from '../recurring-deposits.service';
  */
 @Injectable()
 export class RecurringDepositsAccountViewResolver {
-  /**
-   * @param {RecurringDepositsService} RecurringDepositsService RecurringDeposits service.
-   */
-  constructor(private recurringDepositsService: RecurringDepositsService) {}
+  private recurringDepositsService = inject(RecurringDepositsService);
 
   /**
    * Returns the RecurringDeposits Account data.

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html

@@ -77,16 +77,17 @@
       </mifosx-recurring-deposits-account-charges-step>
     </mat-step>
 
-    <mat-step state="preview" *ngIf="recurringDepositAccountFormValid" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-recurring-deposits-account-preview-step
-        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountData]="recurringDepositAccountData"
-        (submitEvent)="submit()"
-      >
-      </mifosx-recurring-deposits-account-preview-step>
-    </mat-step>
+    @if (recurringDepositAccountFormValid) {
+      <mat-step state="preview" completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-recurring-deposits-account-preview-step
+          [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+          [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+          [recurringDepositAccountData]="recurringDepositAccountData"
+          (submitEvent)="submit()"
+        >
+        </mifosx-recurring-deposits-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -41,6 +41,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateRecurringDepositsAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Imports all the step component */
   @ViewChild(RecurringDepositsAccountDetailsStepComponent, { static: true })
   recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
@@ -56,13 +62,7 @@ export class CreateRecurringDepositsAccountComponent {
   /** Recurring Deposit Account Product Template */
   recurringDepositsAccountProductTemplate: any;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { recurringDepositsAccountTemplate: any }) => {
       this.recurringDepositsAccountTemplate = data.recurringDepositsAccountTemplate;
     });

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html

@@ -78,16 +78,17 @@
       </mifosx-recurring-deposits-account-charges-step>
     </mat-step>
 
-    <mat-step state="preview" *ngIf="recurringDepositAccountFormValidAndNotPristine" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-recurring-deposits-account-preview-step
-        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountData]="recurringDepositAccountData"
-        (submitEvent)="submit()"
-      >
-      </mifosx-recurring-deposits-account-preview-step>
-    </mat-step>
+    @if (recurringDepositAccountFormValidAndNotPristine) {
+      <mat-step state="preview" completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-recurring-deposits-account-preview-step
+          [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+          [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+          [recurringDepositAccountData]="recurringDepositAccountData"
+          (submitEvent)="submit()"
+        >
+        </mifosx-recurring-deposits-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -41,6 +41,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditRecurringDepositAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Imports all the step component */
   @ViewChild(RecurringDepositsAccountDetailsStepComponent, { static: true })
   recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
@@ -56,13 +62,7 @@ export class EditRecurringDepositAccountComponent {
   /** Recurring Deposit Account Product Template */
   recurringDepositsAccountProductTemplate: any;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { recurringDepositsAccountAndTemplate: any }) => {
       this.recurringDepositsAccountAndTemplate = data.recurringDepositsAccountAndTemplate;
     });

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -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'];
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html

@@ -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">

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -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'];
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -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'];
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html

@@ -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>
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -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'];
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.ts

@@ -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') {

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 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'];
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html

@@ -2,9 +2,11 @@
   <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData" [value]="charge">
-        {{ charge.name }}
-      </mat-option>
+      @for (charge of chargeData; track charge) {
+        <mat-option [value]="charge">
+          {{ charge.name }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -55,38 +57,37 @@
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        <span
-          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
-        >
-          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
-        </span>
-        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
-        </span>
-        <span
-          *ngIf="
-            !(
-              charge.chargeTimeType.value === 'Monthly Fee' ||
-              charge.chargeTimeType.value === 'Annual Fee' ||
-              charge.chargeTimeType.value === 'Specified due date' ||
-              charge.chargeTimeType.value === 'Weekly Fee'
-            )
-          "
-        >
-          {{ 'labels.inputs.N/A' | translate }}
-        </span>
-        <button
-          mat-icon-button
-          color="primary"
-          *ngIf="
-            charge.chargeTimeType.value === 'Weekly Fee' ||
+        @if (charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee') {
+          <span>
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
+          </span>
+        }
+        @if (charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee') {
+          <span>
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
+          </span>
+        }
+        @if (
+          !(
+            charge.chargeTimeType.value === 'Monthly Fee' ||
             charge.chargeTimeType.value === 'Annual Fee' ||
-            charge.chargeTimeType.value === 'Specified due date'
-          "
-          (click)="editChargeDate(charge)"
-        >
-          <fa-icon icon="pen"></fa-icon>
-        </button>
+            charge.chargeTimeType.value === 'Specified due date' ||
+            charge.chargeTimeType.value === 'Weekly Fee'
+          )
+        ) {
+          <span>
+            {{ 'labels.inputs.N/A' | translate }}
+          </span>
+        }
+        @if (
+          charge.chargeTimeType.value === 'Weekly Fee' ||
+          charge.chargeTimeType.value === 'Annual Fee' ||
+          charge.chargeTimeType.value === 'Specified due date'
+        ) {
+          <button mat-icon-button color="primary" (click)="editChargeDate(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        }
       </td>
     </ng-container>
 
@@ -94,14 +95,11 @@
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
-        <button
-          mat-icon-button
-          color="primary"
-          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-          (click)="editChargeFeeInterval(charge)"
-        >
-          <fa-icon icon="pen"></fa-icon>
-        </button>
+        @if (charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee') {
+          <button mat-icon-button color="primary" (click)="editChargeFeeInterval(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        }
       </td>
     </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -61,6 +61,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnChanges {
+  dialog = inject(MatDialog);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
   @Input() currencyCode: UntypedFormControl;
@@ -87,12 +91,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
   /** Currency Code */
   currency: Currency | null = null;
 
-  constructor(
-    public dialog: MatDialog,
-    private dateUtils: Dates,
-    private settingsService: SettingsService
-  ) {}
-
   ngOnInit() {
     this.chargesDataSource = [];
     if (this.recurringDepositsAccountTemplate.id && this.recurringDepositsAccountTemplate.charges) {
@@ -141,7 +139,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'number',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Amount',
@@ -172,7 +169,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'datetime-local',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Date',
@@ -214,7 +210,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'text',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Fee Interval',

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html

@@ -3,9 +3,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
-        <mat-option *ngFor="let product of productData" [value]="product.id">
-          {{ product.name }}
-        </mat-option>
+        @for (product of productData; track product) {
+          <mat-option [value]="product.id">
+            {{ product.name }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
@@ -13,37 +15,49 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()" *ngIf="isProductSelected">
-      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="submittedOnDatePicker"
-        formControlName="submittedOnDate"
-        required
-      />
-      <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #submittedOnDatePicker></mat-datepicker>
-      <mat-error>
-        {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (isProductSelected) {
+      <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
+        <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="submittedOnDatePicker"
+          formControlName="submittedOnDate"
+          required
+        />
+        <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+        <mat-error>
+          {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
 
-    <mat-form-field class="flex-48" *ngIf="isProductSelected">
-      <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
-      <mat-select formControlName="fieldOfficerId">
-        <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
-          {{ officer.displayName }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    @if (isProductSelected) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
+        <mat-select formControlName="fieldOfficerId">
+          @for (officer of fieldOfficerData; track officer) {
+            <mat-option [value]="officer.id">
+              {{ officer.displayName }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }
 
-    <mat-form-field class="flex-48" *ngIf="isProductSelected">
-      <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
-    </mat-form-field>
+    @if (isProductSelected) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+        <input
+          matInput
+          formControlName="externalId"
+          matTooltip="{{ 'tooltips.Provides an external id' | translate }}"
+        />
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
@@ -26,6 +26,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Recurring Deposits Account Template */
   @Input() recurringDepositsAccountTemplate: any;
 
@@ -53,11 +57,7 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositsAccountDetailsForm();
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts

@@ -32,8 +32,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('expandChartSlab', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts

@@ -34,8 +34,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('expandChartSlab', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -22,25 +22,25 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option
-          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id"
-        >
-          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
+          <mat-option [value]="lockinPeriodFrequencyType.id">
+            {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
-    <mifosx-input-amount
-      [currency]="currency"
-      [isRequired]="true"
-      *ngIf="currency"
-      class="flex-48"
-      [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
-      [inputLabel]="'Recurring Deposit Amount'"
-    >
-    </mifosx-input-amount>
+    @if (currency) {
+      <mifosx-input-amount
+        [currency]="currency"
+        [isRequired]="true"
+        class="flex-48"
+        [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
+        [inputLabel]="'Recurring Deposit Amount'"
+      >
+      </mifosx-input-amount>
+    }
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Period' | translate }}</h4>
 
@@ -52,9 +52,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -62,7 +64,7 @@
       {{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}
     </mat-checkbox>
 
-    <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
+    @if (!recurringDepositAccountSettingsForm.value.isCalendarInherited) {
       <mat-form-field class="flex-48" (click)="expectedFirstDepositOnDatePicker.open()">
         <mat-label>{{ 'labels.inputs.Deposit Start Date' | translate }}</mat-label>
         <input
@@ -76,9 +78,7 @@
         <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
       </mat-form-field>
-
       <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Frequency' | translate }}</h4>
-
       <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Deposit Frequency' | translate }}</mat-label>
         <input type="number" matInput formControlName="recurringFrequency" required />
@@ -87,20 +87,21 @@
           <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
       <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
         <mat-select formControlName="recurringFrequencyType" required>
-          <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+            <mat-option [value]="periodFrequencyType.id">
+              {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+            </mat-option>
+          }
         </mat-select>
         <mat-error>
           {{ 'labels.inputs.Deposit Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
           <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-    </ng-container>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
@@ -118,9 +119,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
@@ -138,9 +141,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -154,9 +159,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -176,12 +183,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option
-          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
-          [value]="preClosurePenalInterestOnType.id"
-        >
-          {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData; track preClosurePenalInterestOnType) {
+          <mat-option [value]="preClosurePenalInterestOnType.id">
+            {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -192,18 +198,18 @@
       <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
     </mat-form-field>
 
-    <ng-container *ngIf="taxGroup">
+    @if (taxGroup) {
       <h4 class="mat-h4 flex-98">{{ 'labels.heading.Tax Group' | translate }}</h4>
-
       <mat-checkbox labelPosition="before" formControlName="withHoldTax" class="margin-v flex-48">
         {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
       </mat-checkbox>
-
-      <mat-form-field class="flex-48" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
-        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
-        <input type="text" matInput formControlName="taxGroupId" />
-      </mat-form-field>
-    </ng-container>
+      @if (recurringDepositAccountSettingsForm.controls.taxGroupId) {
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
+          <input type="text" matInput formControlName="taxGroupId" />
+        </mat-form-field>
+      }
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -36,6 +36,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountSettingsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   @Input() isNew = true;
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
@@ -60,10 +63,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositAccountSettingsForm();
     this.buildDependencies();
   }

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html

@@ -3,12 +3,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option
-          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
-          [value]="interestCompoundingPeriodType.id"
-        >
-          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCompoundingPeriodType of interestCompoundingPeriodTypeData; track interestCompoundingPeriodType) {
+          <mat-option [value]="interestCompoundingPeriodType.id">
+            {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -19,12 +18,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option
-          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
-          [value]="interestPostingPeriodType.id"
-        >
-          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestPostingPeriodType of interestPostingPeriodTypeData; track interestPostingPeriodType) {
+          <mat-option [value]="interestPostingPeriodType.id">
+            {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -35,12 +33,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option
-          *ngFor="let interestCalculationType of interestCalculationTypeData"
-          [value]="interestCalculationType.id"
-        >
-          {{ interestCalculationType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCalculationType of interestCalculationTypeData; track interestCalculationType) {
+          <mat-option [value]="interestCalculationType.id">
+            {{ interestCalculationType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
@@ -51,12 +48,14 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option
-          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
-          [value]="interestCalculationDaysInYearType.id"
-        >
-          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (
+          interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData;
+          track interestCalculationDaysInYearType
+        ) {
+          <mat-option [value]="interestCalculationDaysInYearType.id">
+            {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
@@ -21,6 +21,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountTermsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
 
@@ -43,10 +46,7 @@ export class RecurringDepositsAccountTermsStepComponent implements OnInit, OnCha
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositsAccountTermsForm();
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html

@@ -64,63 +64,65 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="recurringDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); editCharge(charge)"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); deleteCharge(charge.id)"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-          </span>
-          <span
-            *ngIf="
-              recurringDepositsAccountData.status.value !== 'Submitted and pending approval' &&
-              charge.amountOutstanding !== 0
-            "
-          >
-            <span
-              *ngIf="
+          @if (recurringDepositsAccountData.status.value === 'Submitted and pending approval') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+                *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); editCharge(charge)"
+              >
+                <i class="fa fa-pencil"></i>
+              </button>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="warn"
+                matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+                *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); deleteCharge(charge.id)"
+              >
+                <i class="fa fa-trash"></i>
+              </button>
+            </span>
+          }
+          @if (
+            recurringDepositsAccountData.status.value !== 'Submitted and pending approval' &&
+            charge.amountOutstanding !== 0
+          ) {
+            <span>
+              @if (
                 charge.chargeTimeType.value === 'Monthly Fee' ||
                 charge.chargeTimeType.value === 'Annual Fee' ||
                 charge.chargeTimeType.value === 'Specified due date'
-              "
-            >
-              <button
-                class="account-action-button"
-                mat-raised-button
-                color="primary"
-                matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-                *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); payCharge(charge.id)"
-              >
-                <i class="fa fa-dollar"></i>
-              </button>
-              <button
-                class="account-action-button"
-                mat-raised-button
-                color="primary"
-                matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-                *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); waiveCharge(charge.id)"
-              >
-                <i class="fa fa-flag"></i>
-              </button>
+              ) {
+                <span>
+                  <button
+                    class="account-action-button"
+                    mat-raised-button
+                    color="primary"
+                    matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+                    *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+                    (click)="routeEdit($event); payCharge(charge.id)"
+                  >
+                    <i class="fa fa-dollar"></i>
+                  </button>
+                  <button
+                    class="account-action-button"
+                    mat-raised-button
+                    color="primary"
+                    matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+                    *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+                    (click)="routeEdit($event); waiveCharge(charge.id)"
+                  >
+                    <i class="fa fa-flag"></i>
+                  </button>
+                </span>
+              }
             </span>
-          </span>
+          }
         </td>
       </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -59,6 +59,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ChargesTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private savingsService = inject(SavingsService);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private settingsService = inject(SettingsService);
+
   /** Recurring Deposits Account Data */
   recurringDepositsAccountData: any;
   /** Charges Data */
@@ -89,15 +97,7 @@ export class ChargesTabComponent implements OnInit {
    * Retrieves Recurring Deposits Account Data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private savingsService: SavingsService,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private translateService: TranslateService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.chargesData = this.recurringDepositsAccountData.charges;
@@ -129,7 +129,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'date',
         required: true
       })
-
     ];
     const data = {
       title: `Pay Charge ${chargeId}`,
@@ -193,7 +192,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'number',
         required: true
       })
-
     ];
     const data = {
       title: `Edit Charge ${charge.id}`,

src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -24,12 +24,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositConfirmationDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data Provides a confirmation for all the recurring deposit actions.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<RecurringDepositConfirmationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<RecurringDepositConfirmationDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EntityDatatableTabComponent } from '../../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -17,6 +17,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableTabsComponent {
+  private route = inject(ActivatedRoute);
+
   entityId: string;
   /** Savings Datatable */
   entityDatatable: any;
@@ -27,7 +29,7 @@ export class DatatableTabsComponent {
    * Fetches Savings and datatables data from `resolve`
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.entityId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
 
     this.route.data.subscribe((data: { savingsDatatable: any }) => {

src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html

@@ -1,448 +1,500 @@
 <div class="recurring-deposits-account-tables layout-row gap-2percent">
-  <div
-    class="flex-49"
-    *ngIf="
-      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <h4 class="table-headers">{{ 'labels.inputs.Account Details' | translate }}</h4>
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.External Id' | translate }}</td>
-          <td>
-            <span *ngIf="recurringDepositsAccountData.externalId">
-              <mifosx-external-identifier
-                externalId="{{ recurringDepositsAccountData.externalId }}"
-                completed="true"
-              ></mifosx-external-identifier>
-            </span>
-            <span *ngIf="!recurringDepositsAccountData.externalId">
-              {{ 'labels.inputs.Not Available' | translate }}
-            </span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
-          <td>
-            {{ recurringDepositsAccountData.fieldOfficerName
-            }}<span *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{
-              'labels.inputs.Unassigned' | translate
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Activation date' | translate }}</td>
-          <td>{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
-          </td>
-        </tr>
-        <tr
-          *ngIf="
+  @if (
+    !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <h4 class="table-headers">{{ 'labels.inputs.Account Details' | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
+            <td>
+              @if (recurringDepositsAccountData.externalId) {
+                <span>
+                  <mifosx-external-identifier
+                    externalId="{{ recurringDepositsAccountData.externalId }}"
+                    completed="true"
+                  ></mifosx-external-identifier>
+                </span>
+              }
+              @if (!recurringDepositsAccountData.externalId) {
+                <span>
+                  {{ 'labels.inputs.Not Available' | translate }}
+                </span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+            <td>
+              {{ recurringDepositsAccountData.fieldOfficerName }}
+              @if (!recurringDepositsAccountData.fieldOfficerName) {
+                <span>{{ 'labels.inputs.Unassigned' | translate }}</span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Activation date' | translate }}</td>
+            <td>{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}</td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+            <td>
+              <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
+            </td>
+          </tr>
+          @if (
             recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals
-          "
-        >
-          <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-            {{ 'labels.inputs.Closed on Date' | translate }}
-          </td>
-          <td>
-            <span>{{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
-          </td>
-        </tr>
-        <tr></tr>
-        <tr>
-          <td>{{ 'labels.inputs.Deposit Frequency' | translate }}</td>
-          <td>
-            <span class="m-r-5">{{ recurringDepositsAccountData.recurringFrequency }}</span>
-            {{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs' }}
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-          <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-          <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+          ) {
+            <tr>
+              @if (recurringDepositsAccountData.timeline.closedOnDate) {
+                <td>
+                  {{ 'labels.inputs.Closed on Date' | translate }}
+                </td>
+              }
+              <td>
+                <span>{{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
+              </td>
+            </tr>
+          }
+          <tr></tr>
+          <tr>
+            <td>{{ 'labels.inputs.Deposit Frequency' | translate }}</td>
+            <td>
+              <span class="m-r-5">{{ recurringDepositsAccountData.recurringFrequency }}</span>
+              {{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs' }}
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.minBalanceForInterestCalculation) {
+            <tr>
+              <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
+              <td>
+                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
+              </td>
+            </tr>
+          }
+          @if (recurringDepositsAccountData.witdHoldTax) {
+            <tr>
+              <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
+              <td>
+                <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 
-  <div
-    class="flex-49"
-    *ngIf="
-      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData?.mandatoryRecommendedDepositAmount
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Deposits till Date' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{
-              recurringDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Withdrwals till Date' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{
-              recurringDepositsAccountData.summary.totalWithdrawals
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-
-        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
-          <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData.summary.totalInterestEarned
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div
-    class="flex-49"
-    *ngIf="
-      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.External Id' | translate }}</td>
-          <td>
-            <span *ngIf="recurringDepositsAccountData.externalId">
-              <mifosx-external-identifier
-                externalId="{{ recurringDepositsAccountData.externalId }}"
-                completed="true"
-              ></mifosx-external-identifier>
-            </span>
-            <span *ngIf="!recurringDepositsAccountData.externalId">
-              {{ 'labels.inputs.Not Available' | translate }}
-            </span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Date of Deposit' | translate }}</td>
-          <td>
-            <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate"
-              >{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}
-              <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{
-                'labels.inputs.Not Activated' | translate
+  @if (
+    !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+            <td class="r-amount">
+              <span>{{
+                recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
               }}</span>
-            </span>
-            <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate"
-              >{{ recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat }}
-              <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{
-                'labels.inputs.Not Activated' | translate
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+            <td class="r-amount">
+              <span>{{
+                recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
               }}</span>
-            </span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Period' | translate }}</td>
-          <td>
-            <span
-              >{{ recurringDepositsAccountData.depositPeriod }}&nbsp;{{
-                recurringDepositsAccountData.depositPeriodFrequency.value
-              }}</span
-            >
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.maturityDate">
-          <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{
-              recurringDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Actual Available Balance' | translate }}</td>
-          <td class="r-amount">
-            {{
-              recurringDepositsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
-          <td class="r-amount">
-            {{
-              recurringDepositsAccountData.mandatoryRecommendedDepositAmount
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-          <td>{{ 'labels.inputs.Interests Earned' | translate }}</td>
-          <td>
-            <span
-              >{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{
-                recurringDepositsAccountData.summary.totalInterestEarned
-              }}</span
-            >
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
-          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData.summary.totalWithdrawals
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-          <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
-          <td class="r-amount">
-            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
+            <td class="r-amount">
+              <span>{{
+                recurringDepositsAccountData?.mandatoryRecommendedDepositAmount
+                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Deposits till Date' | translate }}</td>
+            <td class="r-amount">
+              @if (recurringDepositsAccountData.summary.totalDeposits) {
+                <span>{{
+                  recurringDepositsAccountData.summary.totalDeposits
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              }
+              @if (!recurringDepositsAccountData.summary.totalDeposits) {
+                <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Withdrwals till Date' | translate }}</td>
+            <td class="r-amount">
+              @if (recurringDepositsAccountData.summary.totalWithdrawals) {
+                <span>{{
+                  recurringDepositsAccountData.summary.totalWithdrawals
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              }
+              @if (!recurringDepositsAccountData.summary.totalWithdrawals) {
+                <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+              }
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.summary.totalInterestEarned >= 0) {
+            <tr>
+              <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
+              <td class="r-amount">
+                <span>{{
+                  recurringDepositsAccountData.summary.totalInterestEarned
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 
-  <div
-    class="flex-49"
-    *ngIf="
-      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.depositAmount">{{
-              recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.depositAmount">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Rate of Interest' | translate }}</td>
-          <td class="r-amount">
-            <span>{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.maturityDate">
-          <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
-          <td class="r-amount">
-            <span>{{
-              recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{
-              recurringDepositsAccountData.summary.totalWithdrawals
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-          <td>{{ 'labels.inputs.Closed on Date' | translate }}</td>
-          <td>
-            {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Deposits Frequency' | translate }}</td>
-          <td>
-            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{
-              recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs'
-            }}
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-          <td>{{ 'labels.inputs.Interests Posted' | translate }}</td>
-          <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{
-              recurringDepositsAccountData.summary.totalInterestPosted
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{
-              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  @if (
+    recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
+            <td>
+              @if (recurringDepositsAccountData.externalId) {
+                <span>
+                  <mifosx-external-identifier
+                    externalId="{{ recurringDepositsAccountData.externalId }}"
+                    completed="true"
+                  ></mifosx-external-identifier>
+                </span>
+              }
+              @if (!recurringDepositsAccountData.externalId) {
+                <span>
+                  {{ 'labels.inputs.Not Available' | translate }}
+                </span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Date of Deposit' | translate }}</td>
+            <td>
+              @if (!recurringDepositsAccountData.expectedFirstDepositOnDate) {
+                <span
+                  >{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}
+                  @if (!recurringDepositsAccountData.timeline.activatedOnDate) {
+                    <span>{{ 'labels.inputs.Not Activated' | translate }}</span>
+                  }
+                </span>
+              }
+              @if (recurringDepositsAccountData.expectedFirstDepositOnDate) {
+                <span
+                  >{{ recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat }}
+                  @if (!recurringDepositsAccountData.expectedFirstDepositOnDate) {
+                    <span>{{ 'labels.inputs.Not Activated' | translate }}</span>
+                  }
+                </span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Period' | translate }}</td>
+            <td>
+              <span
+                >{{ recurringDepositsAccountData.depositPeriod }}&nbsp;{{
+                  recurringDepositsAccountData.depositPeriodFrequency.value
+                }}</span
+              >
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.maturityDate) {
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+              <td>
+                <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
+              </td>
+            </tr>
+          }
+          <tr>
+            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+            <td class="r-amount">
+              @if (recurringDepositsAccountData.summary.totalDeposits) {
+                <span>{{
+                  recurringDepositsAccountData.summary.totalDeposits
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              }
+              @if (!recurringDepositsAccountData.summary.totalDeposits) {
+                <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Actual Available Balance' | translate }}</td>
+            <td class="r-amount">
+              {{
+                recurringDepositsAccountData.summary.accountBalance
+                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
+            <td class="r-amount">
+              {{
+                recurringDepositsAccountData.mandatoryRecommendedDepositAmount
+                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.summary.totalInterestEarned) {
+            <tr>
+              <td>{{ 'labels.inputs.Interests Earned' | translate }}</td>
+              <td>
+                <span
+                  >{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{
+                    recurringDepositsAccountData.summary.totalInterestEarned
+                  }}</span
+                >
+              </td>
+            </tr>
+          }
+          @if (recurringDepositsAccountData.summary.totalWithdrawals) {
+            <tr>
+              <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
+              <td class="r-amount">
+                <span>{{
+                  recurringDepositsAccountData.summary.totalWithdrawals
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              </td>
+            </tr>
+          }
+          @if (recurringDepositsAccountData.minBalanceForInterestCalculation) {
+            <tr>
+              <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
+              <td class="r-amount">
+                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+
+  @if (
+    recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+            <td class="r-amount">
+              @if (recurringDepositsAccountData.depositAmount) {
+                <span>{{
+                  recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              }
+              @if (!recurringDepositsAccountData.depositAmount) {
+                <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+              }
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Rate of Interest' | translate }}</td>
+            <td class="r-amount">
+              <span>{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</span>
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.maturityDate) {
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+              <td class="r-amount">
+                <span>{{
+                  recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              </td>
+            </tr>
+          }
+          <tr>
+            <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
+            <td class="r-amount">
+              @if (recurringDepositsAccountData.summary.totalWithdrawals) {
+                <span>{{
+                  recurringDepositsAccountData.summary.totalWithdrawals
+                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                }}</span>
+              }
+              @if (!recurringDepositsAccountData.summary.totalWithdrawals) {
+                <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+              }
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.timeline.closedOnDate) {
+            <tr>
+              <td>{{ 'labels.inputs.Closed on Date' | translate }}</td>
+              <td>
+                {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
+              </td>
+            </tr>
+          }
+          <tr>
+            <td>{{ 'labels.inputs.Deposits Frequency' | translate }}</td>
+            <td>
+              {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{
+                recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs'
+              }}
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.summary.totalInterestEarned) {
+            <tr>
+              <td>{{ 'labels.inputs.Interests Posted' | translate }}</td>
+              <td class="r-amount">
+                @if (recurringDepositsAccountData.summary.totalInterestPosted) {
+                  <span>{{
+                    recurringDepositsAccountData.summary.totalInterestPosted
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}</span>
+                }
+                @if (!recurringDepositsAccountData.summary.totalInterestPosted) {
+                  <span>{{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 </div>
 
 <div class="recurring-deposits-account-tables layout-row gap-2percent">
-  <div
-    class="flex-49"
-    *ngIf="
-      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
-          <td class="r-amount">{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
-          <td>
-            <span>{{
-              recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
-          <td>
-            <span>{{
-              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
-            }}</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-          <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
-          <td>
-            <span
-              >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
-              {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}</span
-            >
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  @if (
+    !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
+            <td class="r-amount">{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+            <td>
+              <span>{{
+                recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
+              }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+            <td>
+              <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
+            <td>
+              <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+            <td>
+              <span>{{
+                recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
+              }}</span>
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.preClosurePenalApplicable) {
+            <tr>
+              <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
+              <td>
+                <span
+                  >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
+                  {{
+                    recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs'
+                  }}</span
+                >
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 
-  <div
-    class="flex-49"
-    *ngIf="
-      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
-    "
-  >
-    <table>
-      <tbody>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
-          <td>
-            <span>{{
-              recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
-            }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
-          <td>
-            <span>{{
-              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
-            }}</span>
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-          <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
-          <td>
-            <span
-              >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
-              {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}</span
-            >
-          </td>
-        </tr>
-        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-          <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
-          <td>
-            <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  @if (
+    recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+  ) {
+    <div class="flex-49">
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+            <td>
+              <span>{{
+                recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
+              }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+            <td>
+              <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
+            <td>
+              <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+            <td>
+              <span>{{
+                recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
+              }}</span>
+            </td>
+          </tr>
+          @if (recurringDepositsAccountData.preClosurePenalApplicable) {
+            <tr>
+              <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
+              <td>
+                <span
+                  >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
+                  {{
+                    recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs'
+                  }}</span
+                >
+              </td>
+            </tr>
+          }
+          @if (recurringDepositsAccountData.witdHoldTax) {
+            <tr>
+              <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
+              <td>
+                <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 </div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Currency } from 'app/shared/models/general.model';
-import { NgIf, DecimalPipe, CurrencyPipe } from '@angular/common';
+import { DecimalPipe, CurrencyPipe } from '@angular/common';
 import { ExternalIdentifierComponent } from '../../../../shared/external-identifier/external-identifier.component';
 import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
 import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
@@ -21,15 +21,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   recurringDepositsAccountData: any;
   isprematureAllowed = false;
   entityType: string;
   currency: Currency;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.currency = this.recurringDepositsAccountData.currency;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
@@ -30,8 +30,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('expandChartSlab', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
@@ -52,6 +52,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class InterestRateChartTabComponent {
+  private route = inject(ActivatedRoute);
+
   /** Interest Rate Chart Data */
   interestRateChartData: any = [];
   /** Columns to be displayed in interest rate chart table. */
@@ -80,7 +82,7 @@ export class InterestRateChartTabComponent {
    * Retrieves recurring deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.interestRateChartData = data.recurringDepositsAccountData.accountChart.chartSlabs;
     });

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -29,48 +29,50 @@
               <span class="account-overview">
                 {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
                 {{ recurringDepositsAccountData.clientName || recurringDepositsAccountData.groupName }}
-                <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
-                  <mifosx-account-number
-                    accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
-                  ></mifosx-account-number>
-                </span>
+                @if (recurringDepositsAccountData.clientAccountNo) {
+                  <span class="m-l-10">
+                    <mifosx-account-number
+                      accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
+                    ></mifosx-account-number>
+                  </span>
+                }
               </span>
             </div>
 
-            <div
-              class="flex-30"
-              *ngIf="
-                !recurringDepositsAccountData.status.rejected &&
-                !recurringDepositsAccountData.status.submittedAndPendingApproval
-              "
-            >
-              <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
-              <table class="account-overview">
-                <tbody>
-                  <tr>
-                    <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
-                    <td class="r-amount">
-                      {{
-                        recurringDepositsAccountData.summary.accountBalance
-                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                      }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                    <td class="r-amount">
-                      {{
-                        recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                      }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
-                    <td class="r-amount">{{ recurringDepositsAccountData.depositPeriod | number }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            @if (
+              !recurringDepositsAccountData.status.rejected &&
+              !recurringDepositsAccountData.status.submittedAndPendingApproval
+            ) {
+              <div class="flex-30">
+                <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
+                <table class="account-overview">
+                  <tbody>
+                    <tr>
+                      <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                      <td class="r-amount">
+                        {{
+                          recurringDepositsAccountData.summary.accountBalance
+                            | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                      <td class="r-amount">
+                        {{
+                          recurringDepositsAccountData.depositAmount
+                            | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
+                      <td class="r-amount">{{ recurringDepositsAccountData.depositPeriod | number }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            }
 
             <div class="flex-5">
               <button
@@ -89,22 +91,24 @@
       </div>
 
       <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let item of buttonConfig.singleButtons">
+        @for (item of buttonConfig.singleButtons; track item) {
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
             <i ngClass="{{ item.icon }}"></i> {{ 'labels.menus.' + item.name | translate }}
           </button>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="buttonConfig.options.length">
+        @if (buttonConfig.options.length) {
           <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
-            <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
-                {{ 'labels.menus.' + option.name | translate }}
-              </button>
-            </span>
+            @for (option of buttonConfig.options; track option) {
+              <span>
+                <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                  {{ 'labels.menus.' + option.name | translate }}
+                </button>
+              </span>
+            }
           </mat-menu>
-        </ng-container>
+        }
       </mat-menu>
     </mat-card-title-group>
   </mat-card-header>
@@ -129,7 +133,7 @@
       >
         {{ 'labels.inputs.Interest Rate Chart' | translate }}
       </a>
-      <ng-container *ngIf="showTransactions">
+      @if (showTransactions) {
         <a
           mat-tab-link
           [routerLink]="['./transactions']"
@@ -139,7 +143,7 @@
         >
           {{ 'labels.inputs.Transactions' | translate }}
         </a>
-      </ng-container>
+      }
       <a
         mat-tab-link
         [routerLink]="['./charges']"
@@ -149,7 +153,7 @@
       >
         {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <ng-container *ngIf="recurringDepositsAccountData.clientId">
+      @if (recurringDepositsAccountData.clientId) {
         <a
           mat-tab-link
           [routerLink]="['./standing-instructions-tab']"
@@ -159,8 +163,8 @@
         >
           {{ 'labels.inputs.Standing Instructions' | translate }}
         </a>
-      </ng-container>
-      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
+      }
+      @for (savingsDatatable of savingsDatatables; track savingsDatatable) {
         <a
           mat-tab-link
           *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
@@ -171,7 +175,7 @@
         >
           {{ savingsDatatable.registeredTableName }}
         </a>
-      </ng-container>
+      }
     </nav>
     <mat-tab-nav-panel #tabPanel>
       <router-outlet></router-outlet>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -24,7 +24,7 @@ import {
   MatCardContent
 } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
-import { NgClass, NgIf, NgFor, DecimalPipe, CurrencyPipe } from '@angular/common';
+import { NgClass, DecimalPipe, CurrencyPipe } from '@angular/common';
 import { AccountNumberComponent } from '../../../shared/account-number/account-number.component';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -67,6 +67,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountViewComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private savingsService = inject(SavingsService);
+  dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** RecurringDeposits Account Data */
   recurringDepositsAccountData: any;
   /** Button Configuration */
@@ -86,14 +93,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
    * @param {Router} router Router
    * @param {RecurringDepositsService} recurringDepositsService RecurringDeposits Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private recurringDepositsService: RecurringDepositsService,
-    private savingsService: SavingsService,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { recurringDepositsAccountData: any; savingsDatatables: any }) => {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.charges = this.recurringDepositsAccountData.charges;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -46,30 +46,34 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value !== 'Deleted'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-              [routerLink]="['../', 'standing-instructions', instruction.id, 'edit']"
-            >
-              <i class="fa fa-edit"></i>
-            </button>
-          </span>
-          <span *ngIf="instruction.status.value !== 'Deleted'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
-              (click)="deleteStandingInstruction(instruction.id)"
-            >
-              <i class="fa fa-times"></i>
-            </button>
-          </span>
+          @if (instruction.status.value !== 'Deleted') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+                *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+                [routerLink]="['../', 'standing-instructions', instruction.id, 'edit']"
+              >
+                <i class="fa fa-edit"></i>
+              </button>
+            </span>
+          }
+          @if (instruction.status.value !== 'Deleted') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="warn"
+                matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+                *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+                (click)="deleteStandingInstruction(instruction.id)"
+              >
+                <i class="fa fa-times"></i>
+              </button>
+            </span>
+          }
           <button
             class="account-action-button"
             mat-raised-button

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   MatTableDataSource,
@@ -51,6 +51,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class StandingInstructionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private dialog = inject(MatDialog);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+
   /** Recurring Deposits Data */
   recurringDepositsData: any;
   /** Instructions Data */
@@ -75,13 +81,7 @@ export class StandingInstructionsTabComponent implements OnInit {
    * Retrieves Recurring Deposits Account Data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private recurringDepositsService: RecurringDepositsService,
-    private dialog: MatDialog,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.recurringDepositsData = data.recurringDepositsAccountData;
     });

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html

@@ -14,10 +14,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
-          <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (editTransactionForm.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
@@ -31,9 +33,11 @@
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
+            @for (paymentType of paymentTypeOptions; track paymentType) {
+              <mat-option [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
 
@@ -47,30 +51,40 @@
           </span>
         </div>
 
-        <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-          <input type="number" formControlName="accountNumber" matInput />
-        </mat-form-field>
+        @if (editTransactionForm.controls['accountNumber']) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input type="number" formControlName="accountNumber" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-          <input type="number" formControlName="checkNumber" matInput />
-        </mat-form-field>
+        @if (editTransactionForm.controls['checkNumber']) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-          <input formControlName="routingCode" matInput />
-        </mat-form-field>
+        @if (editTransactionForm.controls['routingCode']) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-          <input formControlName="receiptNumber" matInput />
-        </mat-form-field>
+        @if (editTransactionForm.controls['receiptNumber']) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-          <input formControlName="bankNumber" matInput />
-        </mat-form-field>
+        @if (editTransactionForm.controls['bankNumber']) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+        }
 
         <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../']">

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -32,6 +32,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditTransactionComponent 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);
+
   /** Minimum Due Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Due Date allowed. */
@@ -63,14 +70,7 @@ export class EditTransactionComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @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: { recurringDepositsAccountTransactionTemplate: any }) => {
       this.transactionTemplateData = data.recurringDepositsAccountTransactionTemplate;
       if (this.transactionTemplateData.currency) {

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html

@@ -4,14 +4,16 @@
       <div class="m-b-20">
         <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
-      <div class="action-button m-b-20 layout-row gap-20px" *ngIf="checkStatus()">
-        <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
-        >
-        <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
-        >
-      </div>
+      @if (checkStatus()) {
+        <div class="action-button m-b-20 layout-row gap-20px">
+          <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
+            {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+          >
+          <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
+            {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+          >
+        </div>
+      }
     </div>
 
     <table mat-table [dataSource]="dataSource">

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -18,7 +18,7 @@ import {
 } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -60,6 +60,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class TransactionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Recurring Deposits Account Status */
   status: any;
   /** Transactions Data */
@@ -87,10 +90,7 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves recurring deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.transactionsData = data.recurringDepositsAccountData.transactions;
       this.status = data.recurringDepositsAccountData.status.value;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html

@@ -1,23 +1,22 @@
-<div class="container m-b-20 align-end gap-2percent" *ngIf="!transactionData.reversed">
-  <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
+@if (!transactionData.reversed) {
+  <div class="container m-b-20 align-end gap-2percent">
+    <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
+      @if (!(transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true')) {
+        <button mat-raised-button color="primary" [routerLink]="'edit'">
+          <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+        </button>
+      }
+    </span>
     <button
       mat-raised-button
-      color="primary"
-      *ngIf="!(transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true')"
-      [routerLink]="'edit'"
+      color="warn"
+      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()"
     >
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
     </button>
-  </span>
-  <button
-    mat-raised-button
-    color="warn"
-    *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-    (click)="undoTransaction()"
-  >
-    <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
-  </button>
-</div>
+  </div>
+}
 
 <div class="container">
   <mat-card>
@@ -65,19 +64,22 @@
           {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="transactionData.note">
-          {{ 'labels.inputs.Note' | translate }}
-        </div>
+        @if (transactionData.note) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Note' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="transactionData.note">
-          {{ transactionData.note }}
-        </div>
+        @if (transactionData.note) {
+          <div class="flex-50">
+            {{ transactionData.note }}
+          </div>
+        }
 
-        <mifosx-transaction-payment-detail
-          *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData"
-        >
-        </mifosx-transaction-payment-detail>
+        @if (transactionData.paymentDetailData) {
+          <mifosx-transaction-payment-detail [paymentDetailData]="transactionData.paymentDetailData">
+          </mifosx-transaction-payment-detail>
+        }
       </div>
     </mat-card-content>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -11,7 +11,7 @@ import { SettingsService } from 'app/settings/settings.service';
 import { RecurringDepositConfirmationDialogComponent } from '../../custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
-import { Location, NgIf, NgClass, CurrencyPipe } from '@angular/common';
+import { Location, NgClass, CurrencyPipe } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TransactionPaymentDetailComponent } from '../../../../../shared/transaction-payment-detail/transaction-payment-detail.component';
 import { DateFormatPipe } from '../../../../../pipes/date-format.pipe';
@@ -35,6 +35,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewTransactionComponent {
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private route = inject(ActivatedRoute);
+  private location = inject(Location);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private settingsService = inject(SettingsService);
+
   /** Transaction data. */
   transactionData: any;
 
@@ -47,16 +56,7 @@ export class ViewTransactionComponent {
    * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private recurringDepositsService: RecurringDepositsService,
-    private route: ActivatedRoute,
-    private location: Location,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private translateService: TranslateService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { recurringDepositsAccountTransaction: any }) => {
       this.transactionData = data.recurringDepositsAccountTransaction;
     });

src/app/deposits/recurring-deposits/recurring-deposits.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class RecurringDepositsService {
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @params recurringDepositAccountId