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/fixed-deposits/common-resolvers/fixed-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 { FixedDepositsService } from '../fixed-deposits.service';
  */
 @Injectable()
 export class FixedDepositsAccountActionsResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service.
-   */
-  constructor(
-    private savingsService: SavingsService,
-    private fixedDepositsService: FixedDepositsService
-  ) {}
+  private savingsService = inject(SavingsService);
+  private fixedDepositsService = inject(FixedDepositsService);
 
   /**
    * Returns the Fixed deposits account actions data.

src/app/deposits/fixed-deposits/common-resolvers/fixed-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 { FixedDepositsService } from '../fixed-deposits.service';
  */
 @Injectable()
 export class FixedDepositsAccountAndTemplateResolver {
-  /**
-   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits service.
-   */
-  constructor(private fixedDepositsService: FixedDepositsService) {}
+  private fixedDepositsService = inject(FixedDepositsService);
 
   /**
    * Returns the Fixed Deposits Account Template.

src/app/deposits/fixed-deposits/common-resolvers/fixed-deposit-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 { FixedDepositsService } from '../fixed-deposits.service';
  */
 @Injectable()
 export class FixedDepositsAccountTemplateResolver {
-  /**
-   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits service.
-   */
-  constructor(private fixedDepositsService: FixedDepositsService) {}
+  private fixedDepositsService = inject(FixedDepositsService);
 
   /**
    * Returns the Fixed Deposits Account Template.

src/app/deposits/fixed-deposits/common-resolvers/fixed-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 { FixedDepositsService } from '../fixed-deposits.service';
  */
 @Injectable()
 export class FixedDepositsAccountTransactionResolver {
-  /**
-   * @param {FixedDepositsService} fixedDepositsService Savings service.
-   */
-  constructor(private fixedDepositsService: FixedDepositsService) {}
+  private fixedDepositsService = inject(FixedDepositsService);
 
   /**
    * Returns the Fixed Deposits Account Transaction data.

src/app/deposits/fixed-deposits/common-resolvers/fixed-deposit-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 { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits
  */
 @Injectable()
 export class FixedDepositsAccountViewResolver {
-  /**
-   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits service.
-   */
-  constructor(private fixedDepositsService: FixedDepositsService) {}
+  private fixedDepositsService = inject(FixedDepositsService);
 
   /**
    * Returns the Fixed Deposits Account data.

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html

@@ -77,16 +77,17 @@
       </mifosx-fixed-deposit-account-charges-step>
     </mat-step>
 
-    <mat-step state="preview" *ngIf="fixedDepositAccountFormValid" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-fixed-deposit-account-preview-step
-        [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountData]="fixedDepositAccount"
-        (submitEvent)="submit()"
-      >
-      </mifosx-fixed-deposit-account-preview-step>
-    </mat-step>
+    @if (fixedDepositAccountFormValid) {
+      <mat-step state="preview" completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-fixed-deposit-account-preview-step
+          [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
+          [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+          [fixedDepositAccountData]="fixedDepositAccount"
+          (submitEvent)="submit()"
+        >
+        </mifosx-fixed-deposit-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-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 CreateFixedDepositAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Fixed Deposits Account Details Step */
   @ViewChild(FixedDepositAccountDetailsStepComponent, { static: true })
   fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
@@ -67,13 +73,7 @@ export class CreateFixedDepositAccountComponent {
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private fixedDepositsService: FixedDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountTemplate: any }) => {
       this.fixedDepositsAccountTemplate = data.fixedDepositsAccountTemplate;
     });

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

@@ -77,16 +77,17 @@
       </mifosx-fixed-deposit-account-charges-step>
     </mat-step>
 
-    <mat-step state="preview" *ngIf="fixedDepositAccountFormValidAndNotPristine" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-fixed-deposit-account-preview-step
-        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountData]="fixedDepositAccount"
-        (submitEvent)="submit()"
-      >
-      </mifosx-fixed-deposit-account-preview-step>
-    </mat-step>
+    @if (fixedDepositAccountFormValidAndNotPristine) {
+      <mat-step state="preview" completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-fixed-deposit-account-preview-step
+          [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+          [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+          [fixedDepositAccountData]="fixedDepositAccount"
+          (submitEvent)="submit()"
+        >
+        </mifosx-fixed-deposit-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-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 */
@@ -42,6 +42,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditFixedDepositAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Fixed Deposits Account Details Step */
   @ViewChild(FixedDepositAccountDetailsStepComponent, { static: true })
   fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
@@ -70,13 +76,7 @@ export class EditFixedDepositAccountComponent {
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private fixedDepositsService: FixedDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountAndTemplate: any }) => {
       this.fixedDepositsAccountAndTemplate = data.fixedDepositsAccountAndTemplate;
     });

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-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 ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : '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 ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : '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/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-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';
 
@@ -58,6 +58,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositAccountChargesStepComponent implements OnInit, OnChanges {
+  dialog = inject(MatDialog);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+
   /** Fixed deposits account template */
   @Input() fixedDepositsAccountTemplate: any;
   /** Fixed deposits account and product template */
@@ -86,17 +90,6 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
 
-  /**
-   * @param {MatDialog} dialog Mat Dialog
-   * @param {Dates} dateUtils Date Utils
-   * @param {SettingsService} settingsService Settings Service
-   */
-  constructor(
-    public dialog: MatDialog,
-    private dateUtils: Dates,
-    private settingsService: SettingsService
-  ) {}
-
   ngOnInit() {
     this.chargesDataSource = [];
     if (this.fixedDepositsAccountTemplate.id && this.fixedDepositsAccountTemplate.charges) {
@@ -142,7 +135,6 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
         type: 'number',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Amount',
@@ -173,7 +165,6 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
         type: 'datetime-local',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Date',
@@ -215,7 +206,6 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
         type: 'text',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Fee Interval',

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-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/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-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 FixedDepositAccountDetailsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Fixed Deposits Account Template */
   @Input() fixedDepositsAccountTemplate: any;
 
@@ -53,11 +57,7 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createFixedDepositsAccountDetailsForm();
   }
 

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

@@ -31,8 +31,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/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-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/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html

@@ -10,12 +10,11 @@
     <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>
 
@@ -33,9 +32,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 }}
@@ -53,9 +54,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>
 
@@ -69,9 +72,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>
 
@@ -83,42 +88,48 @@
       {{ 'labels.inputs.Transfer Interest to Linked Savings Account' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="fixedDepositAccountSettingsForm.contains('linkAccountId')" class="margin-b flex-48">
-      <mat-label>{{ 'labels.inputs.Linked Savings Account' | translate }}</mat-label>
-      <mat-select formControlName="linkAccountId" required>
-        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-          ({{ account.accountNo }}) {{ account.savingsProductName }}
-        </mat-option>
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.Linked Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (fixedDepositAccountSettingsForm.contains('linkAccountId')) {
+      <mat-form-field class="margin-b flex-48">
+        <mat-label>{{ 'labels.inputs.Linked Savings Account' | translate }}</mat-label>
+        <mat-select formControlName="linkAccountId" required>
+          @for (account of savingsAccountsData; track account) {
+            <mat-option [value]="account.id"> ({{ account.accountNo }}) {{ account.savingsProductName }} </mat-option>
+          }
+        </mat-select>
+        <mat-error>
+          {{ 'labels.inputs.Linked Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Maturity Instructions' | translate }}</mat-label>
       <mat-select formControlName="maturityInstructionId">
-        <mat-option *ngFor="let maturityInstruction of maturityInstructionOptions" [value]="maturityInstruction.id">
-          {{ maturityInstruction.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (maturityInstruction of maturityInstructionOptions; track maturityInstruction) {
+          <mat-option [value]="maturityInstruction.id">
+            {{ maturityInstruction.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field class="flex-48 margin-b" *ngIf="fixedDepositAccountSettingsForm.contains('transferToSavingsId')">
-      <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
-      <mat-select formControlName="transferToSavingsId" required>
-        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-          ({{ account.accountNo }}) {{ account.savingsProductName }}
-        </mat-option>
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (fixedDepositAccountSettingsForm.contains('transferToSavingsId')) {
+      <mat-form-field class="flex-48 margin-b">
+        <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
+        <mat-select formControlName="transferToSavingsId" required>
+          @for (account of savingsAccountsData; track account) {
+            <mat-option [value]="account.id"> ({{ account.accountNo }}) {{ account.savingsProductName }} </mat-option>
+          }
+        </mat-select>
+        <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-divider class="flex-98"></mat-divider>
 
@@ -136,27 +147,26 @@
     <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>
 
-    <ng-container *ngIf="fixedDepositAccountSettingsForm.controls.withHoldTax">
+    @if (fixedDepositAccountSettingsForm.controls.withHoldTax) {
       <mat-divider class="flex-98"></mat-divider>
-
       <mat-checkbox labelPosition="before" formControlName="withHoldTax" class="margin-p flex-48">
         {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
       </mat-checkbox>
-
-      <mat-form-field *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25 flex-48">
-        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
-        <input matInput formControlName="taxGroupId" />
-      </mat-form-field>
-    </ng-container>
+      @if (fixedDepositAccountSettingsForm.controls.taxGroupId) {
+        <mat-form-field class="p-b-25 flex-48">
+          <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
+          <input matInput formControlName="taxGroupId" />
+        </mat-form-field>
+      }
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-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,
@@ -32,6 +32,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   /** Fixed deposits account template */
   @Input() fixedDepositsAccountTemplate: any;
   /** Fixed deposits account and product template */
@@ -52,16 +55,13 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
   /** Savings Accounts Data */
   savingsAccountsData: any;
 
-  maturityInstructionOptions: OptionData;
+  maturityInstructionOptions: OptionData[];
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createFixedDepositAccountSettingsForm();
     this.buildDependencies();
   }

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

@@ -1,14 +1,15 @@
 <form [formGroup]="fixedDepositAccountTermsForm">
   <div class="layout-row-wrap gap-2px responsive-column">
-    <mifosx-input-amount
-      [currency]="currency"
-      [isRequired]="true"
-      *ngIf="currency"
-      class="flex-48"
-      [inputFormControl]="fixedDepositAccountTermsForm.controls.depositAmount"
-      [inputLabel]="'Deposit Amount'"
-    >
-    </mifosx-input-amount>
+    @if (currency) {
+      <mifosx-input-amount
+        [currency]="currency"
+        [isRequired]="true"
+        class="flex-48"
+        [inputFormControl]="fixedDepositAccountTermsForm.controls.depositAmount"
+        [inputLabel]="'Deposit Amount'"
+      >
+      </mifosx-input-amount>
+    }
 
     <span class="flex-48 hide-lt-md"></span>
 
@@ -24,9 +25,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Deposit Period 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-error>
         {{ 'labels.inputs.Deposit Period Type' | translate }} {{ 'labels.commons.is' | translate }}
@@ -39,12 +42,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 }}
@@ -55,12 +57,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 }}
@@ -71,12 +72,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 }}
@@ -87,12 +87,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/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-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, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { Currency } from 'app/shared/models/general.model';
@@ -26,6 +26,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   /** Fixed deposits account template */
   @Input() fixedDepositsAccountTemplate: any;
   /** Fixed deposits account and product template */
@@ -53,10 +56,7 @@ export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createFixedDepositsAccountTermsForm();
   }
 

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

@@ -3,11 +3,13 @@
     <div class="m-b-10">
       <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
     </div>
-    <div class="action-button m-b-20" *ngIf="this.chargesData">
-      <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
-      </button>
-    </div>
+    @if (this.chargesData) {
+      <div class="action-button m-b-20">
+        <button mat-raised-button color="primary" (click)="toggleCharges()">
+          {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
+        </button>
+      </div>
+    }
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -81,62 +83,66 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="fixedDepositsAccountData.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="fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <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>
-            <ng-container *ngIf="isRecurringCharge(charge)">
+          @if (fixedDepositsAccountData.status.value === 'Submitted and pending approval') {
+            <span>
               <button
                 class="account-action-button"
                 mat-raised-button
                 color="primary"
-                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
-                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); inactivateCharge(charge.id)"
+                matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+                *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); editCharge(charge)"
               >
-                <i class="fa fa-ban"></i>
+                <i class="fa fa-pencil"></i>
               </button>
-            </ng-container>
-          </span>
+              <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 (fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0) {
+            <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>
+              @if (isRecurringCharge(charge)) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+                  *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+                  (click)="routeEdit($event); inactivateCharge(charge.id)"
+                >
+                  <i class="fa fa-ban"></i>
+                </button>
+              }
+            </span>
+          }
         </td>
       </ng-container>
 

src/app/deposits/fixed-deposits/fixed-deposit-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 {
@@ -62,6 +62,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ChargesTabComponent implements OnInit {
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
   /** Fixed Deposits Account Data */
   fixedDepositsAccountData: any;
   /** Charges Data */
@@ -97,14 +104,7 @@ export class ChargesTabComponent implements OnInit {
    * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service.
    */
-  constructor(
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.chargesData = this.fixedDepositsAccountData.charges;
@@ -151,7 +151,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'date',
         required: true
       })
-
     ];
     const data = {
       title: `Pay Charge ${chargeId}`,
@@ -225,7 +224,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'number',
         required: true
       })
-
     ];
     const data = {
       title: `Edit Charge ${charge.id}`,

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MatDialogTitle,
@@ -27,8 +27,5 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CalculateInterestDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<CalculateInterestDialogComponent>) {}
+  dialogRef = inject<MatDialogRef<CalculateInterestDialogComponent>>(MatDialogRef);
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,11 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class InactivateChargeDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<InactivateChargeDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<InactivateChargeDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MatDialogTitle,
@@ -27,8 +27,5 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class PostInterestDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<PostInterestDialogComponent>) {}
+  dialogRef = inject<MatDialogRef<PostInterestDialogComponent>>(MatDialogRef);
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,12 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ToggleWithholdTaxDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ToggleWithholdTaxDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<ToggleWithholdTaxDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,12 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class WaiveChargeDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<WaiveChargeDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<WaiveChargeDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/deposits/fixed-deposits/fixed-deposit-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('fixedDepositAccountId');
 
     this.route.data.subscribe((data: { savingsDatatable: any }) => {

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -29,42 +29,44 @@
               <span class="account-overview">
                 <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
                 {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
-                <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
-                  <mifosx-account-number
-                    accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
-                  ></mifosx-account-number>
-                </span>
+                @if (fixedDepositsAccountData.clientAccountNo) {
+                  <span class="m-l-10">
+                    <mifosx-account-number
+                      accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
+                    ></mifosx-account-number>
+                  </span>
+                }
               </span>
             </div>
 
-            <div
-              *ngIf="
-                !fixedDepositsAccountData.status.rejected &&
-                !fixedDepositsAccountData.status.submittedAndPendingApproval
-              "
-              class="flex-30"
-            >
-              <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
-              <table class="account-overview flex-100">
-                <tbody>
-                  <tr>
-                    <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
-                    <td class="r-amount flex-30">
-                      {{
-                        fixedDepositsAccountData.summary.accountBalance
-                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                      }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                    <td class="r-amount flex-30">
-                      {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            @if (
+              !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
+            ) {
+              <div class="flex-30">
+                <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
+                <table class="account-overview flex-100">
+                  <tbody>
+                    <tr>
+                      <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                      <td class="r-amount flex-30">
+                        {{
+                          fixedDepositsAccountData.summary.accountBalance
+                            | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                      <td class="r-amount flex-30">
+                        {{
+                          fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            }
 
             <div class="flex-5">
               <button
@@ -83,20 +85,22 @@
       </div>
 
       <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let button of buttonConfig.singleButtons">
+        @for (button of buttonConfig.singleButtons; track button) {
           <button mat-menu-item (click)="doAction(button.name)">
             <i ngClass="{{ button.icon }}"></i> {{ button.name | translateKey: 'menus' }}
           </button>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="buttonConfig.options.length">
+        @if (buttonConfig.options.length) {
           <button mat-menu-item [matMenuTriggerFor]="More">{{ 'More' | translateKey: 'menus' }}</button>
           <mat-menu #More="matMenu">
-            <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</button>
-            </span>
+            @for (option of buttonConfig.options; track option) {
+              <span>
+                <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</button>
+              </span>
+            }
           </mat-menu>
-        </ng-container>
+        }
       </mat-menu>
     </mat-card-title-group>
   </mat-card-header>
@@ -121,17 +125,19 @@
       >
         {{ 'labels.inputs.Interest Rate Chart' | translate }}
       </a>
-      <span *ngIf="showTransactions">
-        <a
-          mat-tab-link
-          [routerLink]="['./transactions']"
-          routerLinkActive
-          #transactions="routerLinkActive"
-          [active]="transactions.isActive"
-        >
-          {{ 'labels.inputs.Transactions' | translate }}
-        </a>
-      </span>
+      @if (showTransactions) {
+        <span>
+          <a
+            mat-tab-link
+            [routerLink]="['./transactions']"
+            routerLinkActive
+            #transactions="routerLinkActive"
+            [active]="transactions.isActive"
+          >
+            {{ 'labels.inputs.Transactions' | translate }}
+          </a>
+        </span>
+      }
       <a
         mat-tab-link
         [routerLink]="['./charges']"
@@ -141,17 +147,18 @@
       >
         {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <a
-        mat-tab-link
-        [routerLink]="['./standing-instructions']"
-        routerLinkActive
-        #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive"
-        *ngIf="fixedDepositsAccountData.clientId"
-      >
-        {{ 'labels.inputs.Standing Instructions' | translate }}
-      </a>
-      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
+      @if (fixedDepositsAccountData.clientId) {
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instructions']"
+          routerLinkActive
+          #standingInstructions="routerLinkActive"
+          [active]="standingInstructions.isActive"
+        >
+          {{ 'labels.inputs.Standing Instructions' | translate }}
+        </a>
+      }
+      @for (savingsDatatable of savingsDatatables; track savingsDatatable) {
         <a
           mat-tab-link
           *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
@@ -162,7 +169,7 @@
         >
           {{ savingsDatatable.registeredTableName }}
         </a>
-      </ng-container>
+      }
     </nav>
 
     <mat-tab-nav-panel #tabPanel>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-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';
 
@@ -25,7 +25,7 @@ import {
   MatCardContent
 } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
-import { NgClass, NgIf, NgFor, CurrencyPipe } from '@angular/common';
+import { NgClass, 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,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositAccountViewComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private savingsService = inject(SavingsService);
+  dialog = inject(MatDialog);
+
   /** Fixed Deposits Account Data */
   fixedDepositsAccountData: any;
   /** Savings Data Tables */
@@ -86,13 +92,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
    * @param {SavingsService} savingsService Savings Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private fixedDepositsService: FixedDepositsService,
-    private savingsService: SavingsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountData: any; savingsDatatables: any }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.savingsDatatables = data.savingsDatatables;

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

@@ -7,15 +7,19 @@
           <tr>
             <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td>
-              <span *ngIf="fixedDepositsAccountData.externalId">
-                <mifosx-external-identifier
-                  externalId="{{ fixedDepositsAccountData.externalId }}"
-                  completed="true"
-                ></mifosx-external-identifier>
-              </span>
-              <span *ngIf="!fixedDepositsAccountData.externalId">
-                {{ 'labels.inputs.Not Available' | translate }}
-              </span>
+              @if (fixedDepositsAccountData.externalId) {
+                <span>
+                  <mifosx-external-identifier
+                    externalId="{{ fixedDepositsAccountData.externalId }}"
+                    completed="true"
+                  ></mifosx-external-identifier>
+                </span>
+              }
+              @if (!fixedDepositsAccountData.externalId) {
+                <span>
+                  {{ 'labels.inputs.Not Available' | translate }}
+                </span>
+              }
             </td>
           </tr>
           <tr>
@@ -28,10 +32,12 @@
               }}
             </td>
           </tr>
-          <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-            <td>{{ 'labels.inputs.Closed On' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
-          </tr>
+          @if (fixedDepositsAccountData.timeline.closedOnDate) {
+            <tr>
+              <td>{{ 'labels.inputs.Closed On' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
+            </tr>
+          }
           <tr>
             <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
             <td>
@@ -56,14 +62,18 @@
               }}
             </td>
           </tr>
-          <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-            <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.onAccountClosure">
-            <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
-          </tr>
+          @if (fixedDepositsAccountData.withHoldTax) {
+            <tr>
+              <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
+            </tr>
+          }
+          @if (fixedDepositsAccountData.onAccountClosure) {
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
+            </tr>
+          }
         </tbody>
       </table>
     </div>
@@ -92,68 +102,74 @@
             <td>{{ 'labels.inputs.No. of Days in Year' | translate }}</td>
             <td>{{ fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
           </tr>
-          <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-            <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
-            <td>
-              {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
-              {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
-            </td>
-          </tr>
+          @if (fixedDepositsAccountData.preClosurePenalApplicable) {
+            <tr>
+              <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
+              <td>
+                {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
+                {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+              </td>
+            </tr>
+          }
         </tbody>
       </table>
     </div>
   </div>
 
   <div class="flex-49">
-    <div
-      *ngIf="
-        !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval;
-        else otherDetails
-      "
-    >
-      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
-      <table>
-        <tbody>
-          <tr>
-            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-            <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
-            <td class="r-amount">
-              {{
-                fixedDepositsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
-              }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
-            <td class="r-amount">
-              {{
-                fixedDepositsAccountData.summary.totalInterestEarned
-                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
-              }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <ng-template #otherDetails>
+    @if (!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval) {
+      <div>
+        <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
+            </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
+            </tr>
+            @if (fixedDepositsAccountData.summary.totalDeposits) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (fixedDepositsAccountData.summary.totalWithdrawals) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalWithdrawals
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (fixedDepositsAccountData.summary.totalInterestEarned >= 0) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalInterestEarned
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    } @else {
       <div>
         <h4 class="table-headers">{{ 'labels.heading.Other Details' | translate }}</h4>
         <table>
@@ -173,6 +189,6 @@
           </tbody>
         </table>
       </div>
-    </ng-template>
+    }
   </div>
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-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, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { ExternalIdentifierComponent } from '../../../../shared/external-identifier/external-identifier.component';
 import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -18,14 +18,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   fixedDepositsAccountData: any;
   entityType: string;
   currency: Currency;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.currency = this.fixedDepositsAccountData.currency;

src/app/deposits/fixed-deposits/fixed-deposit-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);
+
   /** Fixed Deposits Account Status */
   status: any;
   /** Interest Rate Chart Data */
@@ -82,7 +84,7 @@ export class InterestRateChartTabComponent {
    * Retrieves fixed deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.interestRateChartData = data.fixedDepositsAccountData.accountChart.chartSlabs;
     });

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

@@ -46,29 +46,33 @@
       <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'"
-            >
-              <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'"
+              >
+                <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/fixed-deposits/fixed-deposit-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 fixedDepositsService = inject(FixedDepositsService);
+  private dialog = inject(MatDialog);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+
   /** Fixed Deposits Data */
   fixedDepositsData: any;
   /** Instructions Data */
@@ -79,13 +85,7 @@ export class StandingInstructionsTabComponent implements OnInit {
    * @param {AccountTransfersService} accountTransfersService Accounts Transfer Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private fixedDepositsService: FixedDepositsService,
-    private dialog: MatDialog,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.fixedDepositsData = data.fixedDepositsAccountData;
     });

src/app/deposits/fixed-deposits/fixed-deposit-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/fixed-deposits/fixed-deposit-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 { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -19,7 +19,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';
@@ -61,6 +61,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class TransactionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   accountId: string;
   status: any;
   /** Transactions Data */
@@ -89,11 +93,7 @@ export class TransactionsTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
       this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -1,14 +1,16 @@
 <div class="container m-b-20 align-end-center gap-2percent">
-  <span *ngIf="allowUndo()">
-    <button
-      mat-raised-button
-      color="warn"
-      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()"
-    >
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
-    </button>
-  </span>
+  @if (allowUndo()) {
+    <span>
+      <button
+        mat-raised-button
+        color="warn"
+        *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+        (click)="undoTransaction()"
+      >
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+      </button>
+    </span>
+  }
 </div>
 <div class="container">
   <mat-card>
@@ -56,19 +58,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>
 
       <div class="layout-row layout-align-center gap-2percent column-on-mobile">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts

@@ -1,12 +1,12 @@
 /** 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';
 import { UndoTransactionDialogComponent } from 'app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
 import { Dates } from 'app/core/utils/dates';
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { NgIf, NgClass, CurrencyPipe } from '@angular/common';
+import { 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';
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewTransactionComponent {
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
   accountId: string;
   transactionId: string;
   /** Transaction data. */
@@ -36,14 +43,7 @@ export class ViewTransactionComponent {
 
   /**
    */
-  constructor(
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountTransaction: any }) => {
       this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
       this.transactionData = data.fixedDepositsAccountTransaction;

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-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="activateFixedDepositsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateFixedDepositsAccountForm.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/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-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';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ActivateFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  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 ActivateFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-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="fixedDepositsChargeForm.controls.chargeId.hasError('required')">
-              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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 (fixedDepositsChargeForm.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/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-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 AddChargeFixedDepositsAccountComponent 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. */
@@ -50,14 +57,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings 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: { fixedDepositsAccountActionData: any }) => {
       this.savingsChargeOptions = data.fixedDepositsAccountActionData.chargeOptions;
     });

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-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="approveFixedDepositsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (approveFixedDepositsAccountForm.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/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-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';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ApproveFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  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 ApproveFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 

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

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeOnMaturityAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeOnMaturityAccountForm.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>
 
           <mat-form-field>
@@ -29,33 +31,45 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
             <mat-select required formControlName="onAccountClosureId">
-              <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
-                {{ closureOption.value }}
-              </mat-option>
+              @for (closureOption of onAccountClosureOptions; track closureOption) {
+                <mat-option [value]="closureOption.id">
+                  {{ closureOption.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="closeOnMaturityAccountForm.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="closeOnMaturityAccountForm.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 (closeOnMaturityAccountForm.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 (closeOnMaturityAccountForm.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="closeOnMaturityAccountForm.contains('transferDescription')">
-            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
-            <input matInput formControlName="transferDescription" />
-          </mat-form-field>
+          @if (closeOnMaturityAccountForm.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.Note' | translate }}</mat-label>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-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 CloseFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  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. */
@@ -53,14 +60,7 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
       this.savingsAccountsData = data.fixedDepositsAccountActionData.savingsAccounts;
       this.onAccountClosureOptions = data.fixedDepositsAccountActionData.onAccountClosureOptions;

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

@@ -1,15 +1,27 @@
-<mifosx-approve-fixed-deposits-account *ngIf="actions['Approve']"></mifosx-approve-fixed-deposits-account>
-<mifosx-reject-fixed-deposits-account *ngIf="actions['Reject']"></mifosx-reject-fixed-deposits-account>
-<mifosx-activate-fixed-deposits-account *ngIf="actions['Activate']"></mifosx-activate-fixed-deposits-account>
-<mifosx-undo-approval-fixed-deposits-account
-  *ngIf="actions['Undo Approval'] || actions['Undo Activation']"
-></mifosx-undo-approval-fixed-deposits-account>
-<mifosx-withdraw-by-client-fixed-deposits-account
-  *ngIf="actions['Withdrawn by Client']"
-></mifosx-withdraw-by-client-fixed-deposits-account>
-<mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
-<mifosx-premature-close-fixed-deposits-account
-  *ngIf="actions['Premature Close']"
-></mifosx-premature-close-fixed-deposits-account>
-<mifosx-close-fixed-deposits-account *ngIf="actions['Close']"></mifosx-close-fixed-deposits-account>
-<mifosx-fixed-deposits-cash-transaction *ngIf="actions['Withdrawal']"></mifosx-fixed-deposits-cash-transaction>
+@if (actions['Approve']) {
+  <mifosx-approve-fixed-deposits-account></mifosx-approve-fixed-deposits-account>
+}
+@if (actions['Reject']) {
+  <mifosx-reject-fixed-deposits-account></mifosx-reject-fixed-deposits-account>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-fixed-deposits-account></mifosx-activate-fixed-deposits-account>
+}
+@if (actions['Undo Approval'] || actions['Undo Activation']) {
+  <mifosx-undo-approval-fixed-deposits-account></mifosx-undo-approval-fixed-deposits-account>
+}
+@if (actions['Withdrawn by Client']) {
+  <mifosx-withdraw-by-client-fixed-deposits-account></mifosx-withdraw-by-client-fixed-deposits-account>
+}
+@if (actions['Add Charge']) {
+  <mifosx-add-charge-fixed-deposits-account></mifosx-add-charge-fixed-deposits-account>
+}
+@if (actions['Premature Close']) {
+  <mifosx-premature-close-fixed-deposits-account></mifosx-premature-close-fixed-deposits-account>
+}
+@if (actions['Close']) {
+  <mifosx-close-fixed-deposits-account></mifosx-close-fixed-deposits-account>
+}
+@if (actions['Withdrawal']) {
+  <mifosx-fixed-deposits-cash-transaction></mifosx-fixed-deposits-cash-transaction>
+}

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.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 { ApproveFixedDepositsAccountComponent } from './approve-fixed-deposits-account/approve-fixed-deposits-account.component';
 import { RejectFixedDepositsAccountComponent } from './reject-fixed-deposits-account/reject-fixed-deposits-account.component';
@@ -33,6 +33,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositsAccountActionsComponent {
+  private route = inject(ActivatedRoute);
+
   /** Flag object to store possible actions and render appropriate UI to the user */
   actions: {
     Approve: boolean;
@@ -61,7 +63,7 @@ export class FixedDepositsAccountActionsComponent {
   /**
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     const name = this.route.snapshot.params['name'];
     if (name && name in this.actions) {
       this.actions[name as keyof typeof this.actions] = true;

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html

@@ -1,8 +1,10 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">
-      {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
-    </h2>
+    @if (transactionType.withdrawal) {
+      <h2 mat-title>
+        {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
+      </h2>
+    }
 
     <form [formGroup]="accountTransactionForm" (ngSubmit)="submit()">
       <mat-card-content class="layout-column">
@@ -18,10 +20,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
-          <mat-error *ngIf="accountTransactionForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (accountTransactionForm.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
@@ -35,9 +39,11 @@
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select required 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>
 
@@ -51,30 +57,40 @@
           </span>
         </div>
 
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-          <input type="number" formControlName="accountNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <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="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-          <input type="number" formControlName="checkNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-          <input formControlName="routingCode" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-          <input formControlName="receiptNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+        }
 
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-          <input formControlName="bankNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+        }
 
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormControl,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FixedDepositsCashTransactionComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Minimum Due Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Due Date allowed. */
@@ -57,14 +64,7 @@ export class FixedDepositsCashTransactionComponent 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 fixedDepositsService: FixedDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
       this.currency = data.fixedDepositsAccountActionData.currency;
       this.paymentTypeOptions = data.fixedDepositsAccountActionData.paymentTypeOptions;

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

@@ -15,52 +15,72 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="prematureCloseAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Premature Close Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (prematureCloseAccountForm.controls.closedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Premature Close Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="prematureCloseAccountForm.controls.maturityAmount">
-            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
-            <input type="number" matInput formControlName="maturityAmount" />
-          </mat-form-field>
+          @if (prematureCloseAccountForm.controls.maturityAmount) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
+              <input type="number" matInput formControlName="maturityAmount" />
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('onAccountClosureId')">
-            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
-            <mat-select required formControlName="onAccountClosureId">
-              <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
-                {{ closureOption.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('onAccountClosureId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
+              <mat-select required formControlName="onAccountClosureId">
+                @for (closureOption of onAccountClosureOptions; track closureOption) {
+                  <mat-option [value]="closureOption.id">
+                    {{ closureOption.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="prematureCloseAccountForm.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="prematureCloseAccountForm.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 (prematureCloseAccountForm.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 (prematureCloseAccountForm.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="prematureCloseAccountForm.contains('transferDescription')">
-            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
-            <input matInput formControlName="transferDescription" />
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('transferDescription')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+              <input matInput formControlName="transferDescription" />
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('note')">
-            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
-            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('note')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
+              <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+            </mat-form-field>
+          }
         </div>
       </mat-card-content>
 

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-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 PrematureCloseFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  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. */
@@ -52,14 +59,7 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-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="rejectFixedDepositsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectFixedDepositsAccountForm.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/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-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';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RejectFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  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 RejectFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-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';
 
@@ -22,6 +22,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Undo Approval Fixed Deposits Account form. */
   undoApprovalFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
@@ -37,13 +43,7 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private fixedDepositsService: FixedDepositsService,
-    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/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-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="withdrawFixedDepositsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawFixedDepositsAccountForm.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/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-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';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  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 WithdrawByClientFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 

src/app/deposits/fixed-deposits/fixed-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,10 +12,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class FixedDepositsService {
-  /**
-   * @param {HttpClient} http HttpClient
-   */
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @param accountId Account Id.

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}`,