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/savings/common-resolvers/saving-documents.resolver.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
@@ -7,10 +7,7 @@ import { SavingsService } from '../savings.service';
   providedIn: 'root'
 })
 export class SavingDocumentsResolver {
-  /**
-   * @param {SavingsService} savingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings data.

src/app/savings/common-resolvers/saving-notes.resolver.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
@@ -7,10 +7,7 @@ import { SavingsService } from '../savings.service';
   providedIn: 'root'
 })
 export class SavingNotesResolver {
-  /**
-   * @param {SavingsService} savingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings data.

src/app/savings/common-resolvers/savings-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 */
@@ -13,10 +13,7 @@ import { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountActionsResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings account actions data.
@@ -39,7 +36,8 @@ export class SavingsAccountActionsResolver {
       case 'Close':
         return forkJoin([
           this.savingsService.getSavingsTransactionTemplateResource(savingAccountId),
-          this.savingsService.getSavingsAccountData(savingAccountId)]);
+          this.savingsService.getSavingsAccountData(savingAccountId)
+        ]);
       case 'Apply Annual Fees':
         return this.savingsService.getSavingsAccountData(savingAccountId);
       default:

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountAndTemplateResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account data and template.

src/app/savings/common-resolvers/savings-account-charge.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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountChargeResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account Charge data.

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountTemplateResolver {
-  /**
-   * @param {savingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Shares Account Template.

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountTransactionTemplateResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account Transaction Template data.

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountTransactionResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account Transaction data.

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsAccountViewResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account data.

src/app/savings/common-resolvers/savings-datatable.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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsDatatableResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account's Datatable data.

src/app/savings/common-resolvers/savings-datatables.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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class SavingsDatatablesResolver {
-  /**
-   * @param {SavingsService} SavingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Saving Account's Datatables data.

src/app/savings/common-resolvers/savings-transaction-reciept.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 { SettingsService } from 'app/settings/settings.service';
  */
 @Injectable()
 export class SavingsTransactionRecieptResolver {
-  /**
-   * @param {ReportsService} reportsService Reports service.
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(
-    private reportsService: ReportsService,
-    private settingsService: SettingsService
-  ) {}
+  private reportsService = inject(ReportsService);
+  private settingsService = inject(SettingsService);
 
   /**
    * Returns the Savings Transaction Reciept

src/app/savings/common-resolvers/transaction-datatable.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
@@ -10,11 +10,8 @@ import { SavingsService } from '../savings.service';
 
 @Injectable()
 export class TransactionDatatableResolver {
-  /**
-   *
-   * @param {SavingsService} savingsService
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
+
   /**
    * Returns the Transactions Account's Datatable data.
    * @returns {Observable<any>}

src/app/savings/common-resolvers/transaction-datatables.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
@@ -10,11 +10,8 @@ import { SavingsService } from '../savings.service';
 
 @Injectable()
 export class TransactionDatatablesResolver {
-  /**
-   *
-   * @param savingsService Savings Service
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
+
   /**
    *
    * @param route

src/app/savings/create-savings-account/create-savings-account.component.html

@@ -55,17 +55,18 @@
       </mifosx-savings-account-charges-step>
     </mat-step>
 
-    <mat-step *ngIf="savingsAccountFormValid" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-savings-account-preview-step
-        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-        [savingsAccountTemplate]="savingsAccountTemplate"
-        [savingsAccountTermsForm]="savingsAccountTermsForm"
-        [savingsAccount]="savingsAccount"
-        (submitEvent)="submit()"
-      >
-      </mifosx-savings-account-preview-step>
-    </mat-step>
+    @if (savingsAccountFormValid) {
+      <mat-step completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-savings-account-preview-step
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+          [savingsAccountTemplate]="savingsAccountTemplate"
+          [savingsAccountTermsForm]="savingsAccountTermsForm"
+          [savingsAccount]="savingsAccount"
+          (submitEvent)="submit()"
+        >
+        </mifosx-savings-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/savings/create-savings-account/create-savings-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Components */
@@ -37,6 +37,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateSavingsAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account Template */
   savingsAccountTemplate: any;
   /** Savings Account Product Template */
@@ -60,13 +66,7 @@ export class CreateSavingsAccountComponent {
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountTemplate: any }) => {
       this.savingsAccountTemplate = data.savingsAccountTemplate;
     });

src/app/savings/edit-savings-account/edit-savings-account.component.html

@@ -56,17 +56,18 @@
       </mifosx-savings-account-charges-step>
     </mat-step>
 
-    <mat-step *ngIf="savingsAccountFormValidAndNotPristine" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-savings-account-preview-step
-        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-        [savingsAccountTemplate]="savingsAccountAndTemplate"
-        [savingsAccountTermsForm]="savingsAccountTermsForm"
-        [savingsAccount]="savingsAccount"
-        (submitEvent)="submit()"
-      >
-      </mifosx-savings-account-preview-step>
-    </mat-step>
+    @if (savingsAccountFormValidAndNotPristine) {
+      <mat-step completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-savings-account-preview-step
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+          [savingsAccountTemplate]="savingsAccountAndTemplate"
+          [savingsAccountTermsForm]="savingsAccountTermsForm"
+          [savingsAccount]="savingsAccount"
+          (submitEvent)="submit()"
+        >
+        </mifosx-savings-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/savings/edit-savings-account/edit-savings-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Components */
@@ -37,6 +37,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditSavingsAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account Template */
   savingsAccountAndTemplate: any;
   /** Savings Account Product Template */
@@ -60,13 +66,7 @@ export class EditSavingsAccountComponent {
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountAndTemplate: any }) => {
       this.savingsAccountAndTemplate = data.savingsAccountAndTemplate;
     });

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html

@@ -63,18 +63,19 @@
       </mifosx-savings-active-client-members>
     </mat-step>
 
-    <mat-step *ngIf="savingsAccountFormValid" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-savings-account-preview-step
-        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-        [savingsAccountTemplate]="savingsAccountTemplate"
-        [savingsAccountTermsForm]="savingsAccountTermsForm"
-        [savingsAccount]="savingsAccount"
-        [activeClientMembers]="activeClientMembers"
-        (submitEvent)="submit()"
-      >
-      </mifosx-savings-account-preview-step>
-    </mat-step>
+    @if (savingsAccountFormValid) {
+      <mat-step completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-savings-account-preview-step
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+          [savingsAccountTemplate]="savingsAccountTemplate"
+          [savingsAccountTermsForm]="savingsAccountTermsForm"
+          [savingsAccount]="savingsAccount"
+          [activeClientMembers]="activeClientMembers"
+          (submitEvent)="submit()"
+        >
+        </mifosx-savings-account-preview-step>
+      </mat-step>
+    }
   </mat-stepper>
 </div>

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Components */
@@ -39,6 +39,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateGsimAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account Template */
   savingsAccountTemplate: any;
   /** Savings Account Product Template */
@@ -69,13 +75,7 @@ export class CreateGsimAccountComponent {
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountTemplate: any; groupsData: any }) => {
       this.savingsAccountTemplate = data.savingsAccountTemplate;
       this.dataSource = data.groupsData.activeClientMembers;

src/app/savings/gsim-account/gsim-account.component.html

@@ -33,56 +33,61 @@
       <ng-container matColumnDef="Actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <button
-            *ngIf="element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
-          >
-            <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
-          >
-            <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="element.status.submittedAndPendingApproval"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Approve']"
-          >
-            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
-          >
-            <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../../', element.id, 'actions', 'Activate']"
-          >
-            <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
-          </button>
+          @if (element.status.active) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+            >
+              <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
+            </button>
+          }
+          @if (element.status.active) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+            >
+              <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
+            </button>
+          }
+          @if (element.status.submittedAndPendingApproval) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Approve']"
+            >
+              <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
+            </button>
+          }
+          @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+            >
+              <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
+            </button>
+          }
+          @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['../../', element.id, 'actions', 'Activate']"
+            >
+              <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
+            </button>
+          }
         </td>
       </ng-container>
 

src/app/savings/gsim-account/gsim-account.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import {
@@ -15,7 +15,7 @@ import {
   MatRow
 } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { StatusLookupPipe } from '../../pipes/status-lookup.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -46,6 +46,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GsimAccountComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  dialog = inject(MatDialog);
+
   /** Columns to be displayed in charge overview table. */
   displayedColumns: string[] = [
     'clientDetails',
@@ -71,10 +74,7 @@ export class GsimAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private route: ActivatedRoute,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { gsimData: any; savingAccountData: any; groupsData: any }) => {
       this.gsimOverviewData = data.gsimData[0].childGSIMAccounts;
       this.savingAccountData = data.savingAccountData;

src/app/savings/gsim-account/gsim-account.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 { SavingsService } from '../savings.service';
  */
 @Injectable()
 export class GSIMViewResolver {
-  /**
-   * @param {SavingsService} savingsService Savings service.
-   */
-  constructor(private savingsService: SavingsService) {}
+  private savingsService = inject(SavingsService);
 
   /**
    * Returns the Savings Account data.

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
-              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (activateSavingsAccountForm.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>
         </div>
       </mat-card-content>

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-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 ActivateSavingsAccountComponent 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. */
@@ -38,14 +45,7 @@ export class ActivateSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -6,88 +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="savingsChargeForm.controls.chargeId.hasError('required')">
-              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (savingsChargeForm.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="savingsChargeForm.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="savingsChargeForm.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="savingsChargeForm.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="savingsChargeForm.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="savingsChargeForm.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="savingsChargeForm.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 (savingsChargeForm.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 (savingsChargeForm.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 (savingsChargeForm.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 (savingsChargeForm.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 (savingsChargeForm.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 (savingsChargeForm.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/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-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,
@@ -27,6 +27,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AddChargeSavingsAccountComponent 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 AddChargeSavingsAccountComponent 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: { savingsAccountActionData: any }) => {
       this.savingsChargeOptions = data.savingsAccountActionData.chargeOptions;
     });

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -15,19 +15,23 @@
             />
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
-            <mat-error *ngIf="applyAnnualFeesForm.controls.dueDate.hasError('required')">
-              {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (applyAnnualFeesForm.controls.dueDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" formControlName="amount" required matInput />
-            <mat-error *ngIf="applyAnnualFeesForm.controls.amount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (applyAnnualFeesForm.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>
         </div>
       </mat-card-content>

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-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 ApplyAnnualFeesSavingsAccountComponent 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. */
@@ -42,14 +49,7 @@ export class ApplyAnnualFeesSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.savingsAccountData = data.savingsAccountActionData;

src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="approveSavingsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (approveSavingsAccountForm.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/savings/saving-account-actions/approve-savings-account/approve-savings-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 ApproveSavingsAccountComponent 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. */
@@ -40,14 +47,7 @@ export class ApproveSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeSavingsAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeSavingsAccountForm.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-checkbox class="m-b-25 m-t-15" formControlName="withdrawBalance">
@@ -29,56 +31,67 @@
             {{ 'labels.inputs.Is Interest Posting required on closure date' | translate }}?
           </mat-checkbox>
 
-          <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" class="layout-column">
-            <mat-form-field class="m-t-20" *ngIf="closeSavingsAccountForm.controls['amount']">
-              <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
-              <input type="number" required matInput formControlName="amount" />
-            </mat-form-field>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['paymentTypeId']">
-              <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
-              <mat-select formControlName="paymentTypeId">
-                <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-                  {{ paymentType.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <div class="flex-fill">
-              <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
-                <mat-slide-toggle>
-                  <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                    <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
-                  </div>
-                </mat-slide-toggle>
-              </span>
+          @if (closeSavingsAccountForm.controls['withdrawBalance'].value) {
+            <div class="layout-column">
+              @if (closeSavingsAccountForm.controls['amount']) {
+                <mat-form-field class="m-t-20">
+                  <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
+                  <input type="number" required matInput formControlName="amount" />
+                </mat-form-field>
+              }
+              @if (closeSavingsAccountForm.controls['paymentTypeId']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
+                  <mat-select formControlName="paymentTypeId">
+                    @for (paymentType of paymentTypeOptions; track paymentType) {
+                      <mat-option [value]="paymentType.id">
+                        {{ paymentType.name }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              <div class="flex-fill">
+                <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
+                  <mat-slide-toggle>
+                    <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                      <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
+                    </div>
+                  </mat-slide-toggle>
+                </span>
+              </div>
+              @if (closeSavingsAccountForm.controls['accountNumber']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+                  <input type="number" formControlName="accountNumber" matInput />
+                </mat-form-field>
+              }
+              @if (closeSavingsAccountForm.controls['checkNumber']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+                  <input type="number" formControlName="checkNumber" matInput />
+                </mat-form-field>
+              }
+              @if (closeSavingsAccountForm.controls['routingCode']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+                  <input formControlName="routingCode" matInput />
+                </mat-form-field>
+              }
+              @if (closeSavingsAccountForm.controls['receiptNumber']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+                  <input formControlName="receiptNumber" matInput />
+                </mat-form-field>
+              }
+              @if (closeSavingsAccountForm.controls['bankNumber']) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+                  <input formControlName="bankNumber" matInput />
+                </mat-form-field>
+              }
             </div>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['accountNumber']">
-              <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-              <input type="number" formControlName="accountNumber" matInput />
-            </mat-form-field>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['checkNumber']">
-              <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-              <input type="number" formControlName="checkNumber" matInput />
-            </mat-form-field>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['routingCode']">
-              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-              <input formControlName="routingCode" matInput />
-            </mat-form-field>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['receiptNumber']">
-              <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-              <input formControlName="receiptNumber" matInput />
-            </mat-form-field>
-
-            <mat-form-field *ngIf="closeSavingsAccountForm.controls['bankNumber']">
-              <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-              <input formControlName="bankNumber" matInput />
-            </mat-form-field>
-          </div>
+          }
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>

src/app/savings/saving-account-actions/close-savings-account/close-savings-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,
@@ -33,6 +33,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CloseSavingsAccountComponent 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. */
@@ -56,14 +63,7 @@ export class CloseSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.paymentTypeOptions = data.savingsAccountActionData[0].paymentTypeOptions;
       this.transactionAmount = data.savingsAccountActionData[1].summary.accountBalance;

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -1,52 +1,63 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <mat-card-title *ngIf="transactionType.holdamount">{{ 'labels.heading.Hold Amount' | translate }}</mat-card-title>
-    <mat-card-title *ngIf="transactionType.blockaccount">{{
-      'labels.heading.Block Savings Account' | translate
-    }}</mat-card-title>
+    @if (transactionType.holdamount) {
+      <mat-card-title>{{ 'labels.heading.Hold Amount' | translate }}</mat-card-title>
+    }
+    @if (transactionType.blockaccount) {
+      <mat-card-title>{{ 'labels.heading.Block Savings Account' | translate }}</mat-card-title>
+    }
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content class="layout-row">
         <mat-form-field class="flex-100">
           <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
           <mat-select required formControlName="reasonForBlock">
-            <mat-option *ngFor="let codeValue of reasonOptions" [value]="codeValue.id">
-              {{ codeValue.name }}
-            </mat-option>
+            @for (codeValue of reasonOptions; track codeValue) {
+              <mat-option [value]="codeValue.id">
+                {{ codeValue.name }}
+              </mat-option>
+            }
           </mat-select>
-          <mat-error *ngIf="manageSavingsAccountForm.controls.reasonForBlock.hasError('required')">
-            {{ 'labels.inputs.Reason' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (manageSavingsAccountForm.controls.reasonForBlock.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
         </mat-form-field>
 
-        <mat-form-field class="flex-100" (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
-          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="transactionDatePicker"
-            required
-            formControlName="transactionDate"
-          />
-          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #transactionDatePicker></mat-datepicker>
-          <mat-error *ngIf="manageSavingsAccountForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        @if (transactionType.holdamount) {
+          <mat-form-field class="flex-100" (click)="transactionDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transactionDatePicker></mat-datepicker>
+            @if (manageSavingsAccountForm.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
-          class="flex-100"
-          [currency]="currency"
-          [isRequired]="true"
-          *ngIf="transactionType.holdamount"
-          [inputFormControl]="manageSavingsAccountForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'"
-        >
-        </mifosx-input-amount>
+        @if (transactionType.holdamount) {
+          <mifosx-input-amount
+            class="flex-100"
+            [currency]="currency"
+            [isRequired]="true"
+            [inputFormControl]="manageSavingsAccountForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'"
+          >
+          </mifosx-input-amount>
+        }
       </mat-card-content>
 
       <mat-card-actions class="layout-row align-center gap-5px responsive-column">

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -30,6 +30,14 @@ interface TransactionType {
   ]
 })
 export class ManageSavingsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private systemService = inject(SystemService);
+  private settingsService = inject(SettingsService);
+
   @Input() currency: Currency;
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -58,15 +66,7 @@ export class ManageSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private systemService: SystemService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.transactionCommand = this.route.snapshot.params['name'].toLowerCase().replaceAll(' ', '');
     this.transactionType[this.transactionCommand] = true;
     this.savingAccountId = this.route.snapshot.params['savingAccountId'];

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -14,10 +14,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
-          <mat-error *ngIf="postInterestSavingsAccountForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (postInterestSavingsAccountForm.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>
       </mat-card-content>
 

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-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 PostInterestAsOnSavingsAccountComponent 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. */
@@ -38,14 +45,7 @@ export class PostInterestAsOnSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="rejectSavingsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectSavingsAccountForm.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/savings/saving-account-actions/reject-savings-account/reject-savings-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 RejectSavingsAccountComponent 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. */
@@ -40,14 +47,7 @@ export class RejectSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/saving-account-actions.component.html

@@ -1,23 +1,39 @@
-<mifosx-approve-savings-account *ngIf="actions['Approve']"></mifosx-approve-savings-account>
-<mifosx-reject-savings-account *ngIf="actions['Reject']"></mifosx-reject-savings-account>
-<mifosx-activate-savings-account *ngIf="actions['Activate']"></mifosx-activate-savings-account>
-<mifosx-undo-approval-savings-account *ngIf="actions['Undo Approval']"></mifosx-undo-approval-savings-account>
-<mifosx-post-interest-as-on-savings-account
-  *ngIf="actions['Post Interest As On']"
-></mifosx-post-interest-as-on-savings-account>
-<mifosx-savings-account-assign-staff *ngIf="actions['Assign Staff']"></mifosx-savings-account-assign-staff>
-<mifosx-savings-account-unassign-staff *ngIf="actions['Unassign Staff']"></mifosx-savings-account-unassign-staff>
-<mifosx-withdraw-by-client-savings-account
-  *ngIf="actions['Withdrawn by Client']"
-></mifosx-withdraw-by-client-savings-account>
-<mifosx-add-charge-savings-account *ngIf="actions['Add Charge']"></mifosx-add-charge-savings-account>
-<mifosx-savings-transactions *ngIf="actions['Withdrawal'] || actions['Deposit']"></mifosx-savings-transactions>
-<mifosx-close-savings-account *ngIf="actions['Close']"></mifosx-close-savings-account>
-<mifosx-apply-annual-fees-savings-account
-  *ngIf="actions['Apply Annual Fees']"
-></mifosx-apply-annual-fees-savings-account>
-<mifosx-manage-savings-account
-  [currency]="currency"
-  *ngIf="actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']"
->
-</mifosx-manage-savings-account>
+@if (actions['Approve']) {
+  <mifosx-approve-savings-account></mifosx-approve-savings-account>
+}
+@if (actions['Reject']) {
+  <mifosx-reject-savings-account></mifosx-reject-savings-account>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-savings-account></mifosx-activate-savings-account>
+}
+@if (actions['Undo Approval']) {
+  <mifosx-undo-approval-savings-account></mifosx-undo-approval-savings-account>
+}
+@if (actions['Post Interest As On']) {
+  <mifosx-post-interest-as-on-savings-account></mifosx-post-interest-as-on-savings-account>
+}
+@if (actions['Assign Staff']) {
+  <mifosx-savings-account-assign-staff></mifosx-savings-account-assign-staff>
+}
+@if (actions['Unassign Staff']) {
+  <mifosx-savings-account-unassign-staff></mifosx-savings-account-unassign-staff>
+}
+@if (actions['Withdrawn by Client']) {
+  <mifosx-withdraw-by-client-savings-account></mifosx-withdraw-by-client-savings-account>
+}
+@if (actions['Add Charge']) {
+  <mifosx-add-charge-savings-account></mifosx-add-charge-savings-account>
+}
+@if (actions['Withdrawal'] || actions['Deposit']) {
+  <mifosx-savings-transactions></mifosx-savings-transactions>
+}
+@if (actions['Close']) {
+  <mifosx-close-savings-account></mifosx-close-savings-account>
+}
+@if (actions['Apply Annual Fees']) {
+  <mifosx-apply-annual-fees-savings-account></mifosx-apply-annual-fees-savings-account>
+}
+@if (actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']) {
+  <mifosx-manage-savings-account [currency]="currency"> </mifosx-manage-savings-account>
+}

src/app/savings/saving-account-actions/saving-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 { Currency } from 'app/shared/models/general.model';
 import { ApproveSavingsAccountComponent } from './approve-savings-account/approve-savings-account.component';
@@ -42,6 +42,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingAccountActionsComponent {
+  private route = inject(ActivatedRoute);
+
   /** Flag object to store possible actions and render appropriate UI to the user */
   actions: {
     Approve: boolean;
@@ -92,7 +94,7 @@ export class SavingAccountActionsComponent {
   /**
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       if (data.savingsAccountActionData) {
         this.currency = data.savingsAccountActionData.currency;

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -6,9 +6,11 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Savings Officer' | translate }}</mat-label>
             <mat-select formControlName="toSavingsOfficerId">
-              <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
-                {{ officer.displayName }}
-              </mat-option>
+              @for (officer of fieldOfficerData; track officer) {
+                <mat-option [value]="officer.id">
+                  {{ officer.displayName }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -24,10 +26,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
-            <mat-error *ngIf="savingsAssignStaffForm.controls.assignmentDate.hasError('required')">
-              {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (savingsAssignStaffForm.controls.assignmentDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, 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 SavingsAccountAssignStaffComponent 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. */
@@ -42,14 +49,7 @@ export class SavingsAccountAssignStaffComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.savingsAccountData = data.savingsAccountActionData;

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -1,11 +1,15 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal" class="m-l-10">
-      {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
-    </h2>
-    <h2 mat-title *ngIf="transactionType.deposit" class="m-l-10">
-      {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
-    </h2>
+    @if (transactionType.withdrawal) {
+      <h2 mat-title class="m-l-10">
+        {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
+      </h2>
+    }
+    @if (transactionType.deposit) {
+      <h2 mat-title class="m-l-10">
+        {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
+      </h2>
+    }
 
     <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
       <mat-card-content>
@@ -22,10 +26,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
-            <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (savingAccountTransactionForm.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
@@ -39,9 +45,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>
 
@@ -55,30 +63,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/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -34,6 +34,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountTransactionsComponent 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. */
@@ -67,14 +74,7 @@ export class SavingsAccountTransactionsComponent 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 savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.paymentTypeOptions = data.savingsAccountActionData.paymentTypeOptions;
       if (data.savingsAccountActionData.currency) {

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -14,10 +14,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="unassignedDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #unassignedDatePicker></mat-datepicker>
-          <mat-error *ngIf="savingsUnassignStaffForm.controls.unassignedDate.hasError('required')">
-            {{ 'labels.inputs.Unassignment Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (savingsUnassignStaffForm.controls.unassignedDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Unassignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
         </mat-form-field>
       </mat-card-content>
 

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, 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 SavingsAccountUnassignStaffComponent 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. */
@@ -38,14 +45,7 @@ export class SavingsAccountUnassignStaffComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-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 UndoApprovalSavingsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Undo Approval Savings Account form. */
   undoApprovalSavingsAccountForm: UntypedFormGroup;
   /** Savings Account Id */
@@ -32,12 +37,7 @@ export class UndoApprovalSavingsAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 

src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="withdrawSavingsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawSavingsAccountForm.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/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-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 WithdrawByClientSavingsAccountComponent 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. */
@@ -40,14 +47,7 @@ export class WithdrawByClientSavingsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting 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.snapshot.params['savingAccountId'];
   }
 

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -2,12 +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 | chargesFilter: chargesDataSource : currencyCode.value"
-        [value]="charge"
-      >
-        {{ charge.name }}
-      </mat-option>
+      @for (charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value; track charge) {
+        <mat-option [value]="charge">
+          {{ charge.name }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -18,110 +17,98 @@
     </button>
   </div>
 
-  <table
-    class="flex-98 mat-elevation-z1"
-    mat-table
-    [dataSource]="chargesDataSource"
-    *ngIf="chargesDataSource.length > 0"
-  >
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        {{ charge.name + ', ' + charge.currency.displaySymbol }}
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value }}
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        {{ charge.amount | formatNumber }}
-        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
-          <fa-icon icon="pen"></fa-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
-      </td>
-    </ng-container>
-
-    <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="
+  @if (chargesDataSource.length > 0) {
+    <table class="flex-98 mat-elevation-z1" mat-table [dataSource]="chargesDataSource">
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount | formatNumber }}
+          <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          @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' ||
               charge.chargeTimeType.value === 'Weekly Fee'
             )
-          "
-        >
-          N/A
-        </span>
-        <button
-          mat-icon-button
-          color="primary"
-          *ngIf="
+          ) {
+            <span> N/A </span>
+          }
+          @if (
             charge.chargeTimeType.value === 'Weekly Fee' ||
             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>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        <span *ngIf="charge.feeInterval">{{ charge.feeInterval }}</span>
-        <span *ngIf="!charge.feeInterval">{{ 'labels.inputs.Not Provided' | translate }}</span>
-        <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>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">
-        <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
+          ) {
+            <button mat-icon-button color="primary" (click)="editChargeDate(charge)">
+              <fa-icon icon="pen"></fa-icon>
+            </button>
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="repaymentsEvery">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          @if (charge.feeInterval) {
+            <span>{{ charge.feeInterval }}</span>
+          }
+          @if (!charge.feeInterval) {
+            <span>{{ 'labels.inputs.Not Provided' | translate }}</span>
+          }
+          @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>
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  }
 
   <div class="flex-98 layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, Input, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntypedFormControl } from '@angular/forms';
 
@@ -62,6 +62,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
+  private dialog = inject(MatDialog);
+  private dateUtils = inject(Dates);
+  private translateService = inject(TranslateService);
+
   /** Savings Account Product Template */
   @Input() savingsAccountProductTemplate: any;
   /** Savings Account Template */
@@ -102,15 +106,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
     'name'
   ];
 
-  /**
-   * @param {MatDialog} dialog Mat Dialog
-   */
-  constructor(
-    private dialog: MatDialog,
-    private dateUtils: Dates,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit() {
     if (this.savingsAccountTemplate) {
       if (!this.isChargesPatched && this.savingsAccountTemplate.charges) {
@@ -154,7 +149,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
         type: 'number',
         required: false
       })
-
     ];
     const data = {
       title: this.translateService.instant('labels.heading.Edit Charge Amount'),
@@ -185,7 +179,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
         type: 'datetime-local',
         required: false
       })
-
     ];
     const data = {
       title: this.translateService.instant('labels.heading.Edit Charge Date'),
@@ -229,7 +222,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
         type: 'text',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Fee Interval',

src/app/savings/savings-account-stepper/savings-account-details-step/savings-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,45 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
-      <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.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (savingsProductSelected) {
+      <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.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
 
-    <mat-form-field class="flex-48" *ngIf="savingsProductSelected">
-      <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 (savingsProductSelected) {
+      <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="savingsProductSelected">
-      <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
-      <input matInput formControlName="externalId" />
-    </mat-form-field>
+    @if (savingsProductSelected) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
+        <input matInput formControlName="externalId" />
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/savings/savings-account-stepper/savings-account-details-step/savings-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';
 
 /** Custom Services */
@@ -24,6 +24,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountDetailsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account Template */
   @Input() savingsAccountTemplate: any;
 
@@ -51,11 +55,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
    * @param {SavingsService} savingsService Savings Service.
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createSavingsAccountDetailsForm();
   }
 

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -16,12 +16,16 @@
 
   <div class="flex-fill layout-row">
     <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
-    <span class="flex-60" *ngIf="savingsAccount.externalId">
-      <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
-    </span>
-    <span class="flex-60" *ngIf="!savingsAccount.externalId">
-      {{ 'labels.inputs.Unassigned' | translate }}
-    </span>
+    @if (savingsAccount.externalId) {
+      <span class="flex-60">
+        <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
+      </span>
+    }
+    @if (!savingsAccount.externalId) {
+      <span class="flex-60">
+        {{ 'labels.inputs.Unassigned' | translate }}
+      </span>
+    }
   </div>
 
   <div class="flex-fill layout-row">
@@ -31,7 +35,7 @@
     }}</span>
   </div>
 
-  <ng-container *ngIf="activeClientMembers">
+  @if (activeClientMembers) {
     <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
     <mat-divider class="flex-fill"></mat-divider>
     <div class="flex-60">
@@ -41,18 +45,16 @@
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
           <td mat-cell *matCellDef="let element">{{ element.id }}</td>
         </ng-container>
-
         <!-- Name Column -->
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
           <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
       </table>
     </div>
-  </ng-container>
+  }
 
   <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
@@ -112,128 +114,137 @@
     }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
-  </div>
+  @if (savingsAccount.minRequiredOpeningBalance) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
+      <span class="flex-60">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
+    </div>
+  }
 
   <div class="flex-fill layout-row">
     <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
     <span class="flex-60">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.lockinPeriodFrequency +
-          ' ' +
-          (savingsAccount.lockinPeriodFrequencyType
-            | find: savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
-      )
-    }}</span>
-  </div>
+  @if (savingsAccount.lockinPeriodFrequency) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+      <span class="flex-60">{{
+        getCatalogTranslation(
+          savingsAccount.lockinPeriodFrequency +
+            ' ' +
+            (savingsAccount.lockinPeriodFrequencyType
+              | find: savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
+        )
+      }}</span>
+    </div>
+  }
 
   <div class="flex-fill layout-row">
     <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
     <span class="flex-60">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span class="flex-40">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
-  </div>
+  @if (savingsAccount.minOverdraftForInterestCalculation) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40"
+        >{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span
+      >
+      <span class="flex-60">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
+    </div>
+  }
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
-  </div>
+  @if (savingsAccount.nominalAnnualInterestRateOverdraft) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
+      <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
+    </div>
+  }
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.overdraftLimit">
-    <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
-  </div>
+  @if (savingsAccount.overdraftLimit) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
+      <span class="flex-60">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
+    </div>
+  }
 
   <div class="flex-fill layout-row">
     <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
     <span class="flex-60">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredBalance">
-    <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.minRequiredBalance }}</span>
-  </div>
+  @if (savingsAccount.minRequiredBalance) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
+      <span class="flex-60">{{ savingsAccount.minRequiredBalance }}</span>
+    </div>
+  }
 
-  <div *ngIf="savingsAccount.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
-
-    <mat-divider class="flex-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.name + ', ' + charge.currency.displaySymbol }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.amount | formatNumber }}
-        </td>
-      </ng-container>
-
-      <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="
+  @if (savingsAccount.charges.length) {
+    <div class="layout-row-wrap responsive-column flex-fill">
+      <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
+      <mat-divider class="flex-fill"></mat-divider>
+      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.name + ', ' + charge.currency.displaySymbol }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="chargeCalculationType">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.amount | formatNumber }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="date">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            @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' ||
                 charge.chargeTimeType.value === 'Weekly Fee'
               )
-            "
-          >
-            N/A
-          </span>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.feeInterval || 'Not Provided' }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value }}
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
-    </table>
-  </div>
+            ) {
+              <span> N/A </span>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="repaymentsEvery">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.feeInterval || 'Not Provided' }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="chargeTimeType">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.chargeTimeType.value }}
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
+      </table>
+    </div>
+  }
 </div>
 
 <div class="layout-row responsive-column align-center gap-2px margin-t">

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
   MatTableDataSource,
@@ -54,6 +54,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountPreviewStepComponent implements OnChanges {
+  private translateService = inject(TranslateService);
+
   /** Savings Account Product Template */
   @Input() savingsAccountProductTemplate: any;
   /** Savings Account Template */
@@ -86,8 +88,6 @@ export class SavingsAccountPreviewStepComponent implements OnChanges {
   /** Form submission event */
   @Output() submitEvent = new EventEmitter();
 
-  constructor(private translateService: TranslateService) {}
-
   ngOnChanges(): void {
     if (this.activeClientMembers?.length > 0) {
       this.dataSource = new MatTableDataSource<any>(this.activeClientMembers.filter((member: any) => member.selected));

src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html

@@ -22,12 +22,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 }}
@@ -38,12 +37,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 }}
@@ -54,12 +52,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 }}
@@ -70,12 +67,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 }}
@@ -102,12 +101,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>
 
@@ -119,25 +117,22 @@
       {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
     </mat-checkbox>
 
-    <div
-      *ngIf="savingsAccountTermsForm.value.allowOverdraft"
-      class="flex-fill layout-row-wrap gap-2percent responsive-column"
-    >
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
-        <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
-      </mat-form-field>
-
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
-        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
-      </mat-form-field>
-
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
-        <input type="number" matInput formControlName="overdraftLimit" />
-      </mat-form-field>
-    </div>
+    @if (savingsAccountTermsForm.value.allowOverdraft) {
+      <div class="flex-fill layout-row-wrap gap-2percent responsive-column">
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
+          <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
+        </mat-form-field>
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
+          <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
+        </mat-form-field>
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
+          <input type="number" matInput formControlName="overdraftLimit" />
+        </mat-form-field>
+      </div>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
@@ -150,10 +145,12 @@
       <input type="number" matInput formControlName="minRequiredBalance" />
     </mat-form-field>
 
-    <mat-form-field class="flex-48" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
-      <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
-      <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
-    </mat-form-field>
+    @if (savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnChanges, OnInit, Input } from '@angular/core';
+import { Component, OnChanges, OnInit, Input, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -31,6 +31,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account and Product Template */
   @Input() savingsAccountProductTemplate: any;
   /** Savings Account Template */
@@ -57,10 +60,7 @@ export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createSavingsAccountTermsForm();
     this.buildDependencies();
   }

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.html

@@ -1,32 +1,30 @@
-<div *ngIf="activeClientMembers">
-  <table class="flex-98" mat-table [dataSource]="dataSource">
-    <!-- Check Column -->
-
-    <ng-container matColumnDef="check">
-      <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-      </th>
-      <td mat-cell *matCellDef="let element">
-        <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-      </td>
-    </ng-container>
-
-    <!-- Position Column -->
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
-      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-    </ng-container>
-
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
-      <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
-  </table>
-</div>
+@if (activeClientMembers) {
+  <div>
+    <table class="flex-98" mat-table [dataSource]="dataSource">
+      <!-- Check Column -->
+      <ng-container matColumnDef="check">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+        </td>
+      </ng-container>
+      <!-- Position Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+      </ng-container>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
+    </table>
+  </div>
+}
 
 <div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -3,15 +3,17 @@
     <div class="m-b-10">
       <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
     </div>
-    <div class="action-button m-b-20" *ngIf="this.chargesData">
-      <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{
-          showInactiveCharges
-            ? viewAllChargeButtons('View Active Charges')
-            : viewAllChargeButtons('View Inactive Charges')
-        }}
-      </button>
-    </div>
+    @if (this.chargesData) {
+      <div class="action-button m-b-20">
+        <button mat-raised-button color="primary" (click)="toggleCharges()">
+          {{
+            showInactiveCharges
+              ? viewAllChargeButtons('View Active Charges')
+              : viewAllChargeButtons('View Inactive Charges')
+          }}
+        </button>
+      </div>
+    }
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -77,62 +79,66 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="savingsAccountData.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="savingsAccountData.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 (savingsAccountData.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 (savingsAccountData.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/savings/savings-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, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -32,7 +32,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
-import { NgIf, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { DateFormatPipe } from '../../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -62,6 +62,14 @@ 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);
+  private dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+  private translateService = inject(TranslateService);
+
   /** Savings Account Data */
   savingsAccountData: any;
   /** Charges Data */
@@ -97,15 +105,7 @@ export class ChargesTabComponent implements OnInit {
    * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    private dialog: MatDialog,
-    private settingsService: SettingsService,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsAccountData = data.savingsAccountData;
       this.chargesData = this.savingsAccountData.charges;
@@ -152,7 +152,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'date',
         required: true
       })
-
     ];
     const data = {
       title: `Pay Charge ${chargeId}`,
@@ -226,7 +225,6 @@ export class ChargesTabComponent implements OnInit {
         type: 'number',
         required: true
       })
-
     ];
     const data = {
       title: `Edit Charge ${charge.id}`,

src/app/savings/savings-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/savings/savings-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,12 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class InactivateChargeDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<InactivateChargeDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<InactivateChargeDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/savings/savings-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/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.ts

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

src/app/savings/savings-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/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.ts

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

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

src/app/savings/savings-account-view/general-tab/general-tab.component.html

@@ -1,279 +1,359 @@
-<div *ngIf="isLoading" class="loader">
-  <div class="loading"></div>
-</div>
+@if (isLoading) {
+  <div class="loader">
+    <div class="loading"></div>
+  </div>
+}
 
-<div class="savings-account-tables layout-row gap-2percent" *ngIf="!isLoading">
-  <div class="flex-49 layout-column gap-4percent">
-    <div
-      *ngIf="
-        !savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval;
-        else alternateDetails
-      "
-    >
-      <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
-      <table>
-        <tbody>
-          <tr>
-            <td>{{ 'labels.inputs.External Id' | translate }}</td>
-            <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
-            </td>
-            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
-            <td>
-              {{
-                savingsAccountData.timeline.activatedOnDate
-                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
-                  : 'Not Activated'
-              }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
-            <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Currency' | translate }}</td>
-            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
-            <td class="r-amount">
-              <span *ngIf="savingsAccountData.nominalAnnualInterestRate"
-                >{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</span
-              >
-              <span *ngIf="!savingsAccountData.nominalAnnualInterestRate">0 %</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+@if (!isLoading) {
+  <div class="savings-account-tables layout-row gap-2percent">
+    <div class="flex-49 layout-column gap-4percent">
+      @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) {
+        <div>
+          <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
+          <table>
+            <tbody>
+              <tr>
+                <td>{{ 'labels.inputs.External Id' | translate }}</td>
+                @if (savingsAccountData.externalId) {
+                  <td>
+                    <mifosx-external-identifier
+                      externalId="{{ savingsAccountData.externalId }}"
+                    ></mifosx-external-identifier>
+                  </td>
+                }
+                @if (!savingsAccountData.externalId) {
+                  <td>{{ 'labels.inputs.Not Provided' | translate }}</td>
+                }
+              </tr>
+              <tr>
+                <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+                <td>
+                  {{
+                    savingsAccountData.timeline.activatedOnDate
+                      ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                      : 'Not Activated'
+                  }}
+                </td>
+              </tr>
+              <tr>
+                <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+                <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
+              </tr>
+              <tr>
+                <td>{{ 'labels.inputs.Currency' | translate }}</td>
+                <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
+              </tr>
+              <tr>
+                <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
+                <td class="r-amount">
+                  @if (savingsAccountData.nominalAnnualInterestRate) {
+                    <span>{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</span>
+                  }
+                  @if (!savingsAccountData.nominalAnnualInterestRate) {
+                    <span>0 %</span>
+                  }
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      } @else {
+        <div>
+          <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
+          <table>
+            <tbody>
+              <tr>
+                <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+                <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
+              </tr>
+              <tr>
+                <td>{{ 'labels.inputs.Balance' | translate }}</td>
+                <td class="r-amount">
+                  {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      }
+      @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) {
+        <div>
+          <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
+          <table>
+            <tbody>
+              @if (savingsAccountData.summary.totalDeposits) {
+                <tr>
+                  <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+                  <td class="r-amount">
+                    {{ savingsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                  </td>
+                </tr>
+              }
+              @if (savingsAccountData.summary.totalInterestEarned >= 0) {
+                <tr>
+                  <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      savingsAccountData.summary.totalInterestEarned
+                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
     </div>
-
-    <ng-template #alternateDetails>
-      <div>
-        <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
+    @if (isActive) {
+      <div class="flex-49">
+        <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
+        <table>
+          <tbody>
+            @if (savingsAccountData.summary.totalWithdrawals) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.totalWithdrawalFees) {
+              <tr>
+                <td>{{ 'labels.inputs.Withdrawals Fees' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.totalAnnualFees) {
+              <tr>
+                <td>{{ 'labels.inputs.Annual Fees' | translate }}</td>
+                <td class="r-amount">
+                  {{ savingsAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.totalInterestEarned >= 0) {
+              <tr>
+                <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.totalInterestPosted) {
+              <tr>
+                <td>{{ 'labels.inputs.Interest Posted' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.interestNotPosted >= 0) {
+              <tr>
+                <td>{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.totalOverdraftInterestDerived) {
+              <tr>
+                <td>{{ 'labels.inputs.Interest On Overdraft' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.totalOverdraftInterestDerived
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.interestNotPosted < 0) {
+              <tr>
+                <td>{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.nominalAnnualInterestRate) {
+              <tr>
+                <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
+                <td class="r-amount">{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
+              </tr>
+            }
+            <tr>
+              <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+              <td>{{ savingsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
+            </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+              <td>{{ savingsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
+            </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
+              <td>{{ savingsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
+            </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+              <td>{{ savingsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
+            </tr>
+            @if (savingsAccountData.withdrawalFee) {
+              <tr>
+                <td>{{ 'labels.inputs.Withdrawal Fee' | translate }}</td>
+                <td class="r-amount">
+                  {{ savingsAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.lastActiveTransactionDate) {
+              <tr>
+                <td>{{ 'labels.inputs.Last Active Transaction Date' | translate }}</td>
+                <td>{{ savingsAccountData.lastActiveTransactionDate | dateFormat }}</td>
+              </tr>
+            }
+            @if (!(savingsAccountData.subStatus.id === 0)) {
+              <tr>
+                <td>{{ 'labels.inputs.Substatus' | translate }}</td>
+                <td>{{ savingsAccountData.subStatus.value }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.daysToInactive) {
+              <tr>
+                <td>{{ 'labels.inputs.Days to Inactive' | translate }}</td>
+                <td>{{ savingsAccountData.daysToInactive }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.daysToDormancy) {
+              <tr>
+                <td>{{ 'labels.inputs.Days to Dormancy' | translate }}</td>
+                <td>{{ savingsAccountData.daysToDormancy }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.daysToEscheat) {
+              <tr>
+                <td>{{ 'labels.inputs.Days to Escheat' | translate }}</td>
+                <td>{{ savingsAccountData.daysToEscheat }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.annualFee) {
+              <tr>
+                <td>{{ 'labels.inputs.Annual Fee' | translate }}</td>
+                <td class="r-amount">
+                  {{ savingsAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.allowOverdraft) {
+              <tr>
+                <td>{{ 'labels.inputs.Overdraft Limit' | translate }}</td>
+                <td class="r-amount">
+                  {{ savingsAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.allowOverdraft) {
+              <tr>
+                <td>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</td>
+                <td>
+                  {{
+                    savingsAccountData.minOverdraftForInterestCalculation
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.minBalanceForInterestCalculation) {
+              <tr>
+                <td>{{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}</td>
+                <td>{{ savingsAccountData.minBalanceForInterestCalculation | formatNumber }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.minRequiredBalance) {
+              <tr>
+                <td>{{ 'labels.inputs.Minimum Required Balance' | translate }}</td>
+                <td>{{ savingsAccountData.minRequiredBalance | formatNumber }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.enforceMinRequiredBalance) {
+              <tr>
+                <td>{{ 'labels.inputs.Enforce Minimum Required Balance' | translate }}</td>
+                <td>{{ savingsAccountData.enforceMinRequiredBalance | yesNo }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.summary.lastInterestCalculationDate) {
+              <tr>
+                <td>{{ 'labels.inputs.Interest Recalculation Date' | translate }}</td>
+                <td>{{ savingsAccountData.summary.lastInterestCalculationDate | dateFormat }}</td>
+              </tr>
+            }
+            @if (savingsAccountData.onHoldFunds) {
+              <tr>
+                <td>{{ 'labels.inputs.On Hold Funds' | translate }}</td>
+                <td>
+                  <a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{
+                    savingsAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}</a>
+                </td>
+              </tr>
+            }
+            @if (savingsAccountData.withHoldTax) {
+              <tr>
+                <td>{{ 'labels.inputs.Withhold Tax Group' | translate }}</td>
+                <td>{{ savingsAccountData.taxGroup.name }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    } @else {
+      <div class="flex-49">
+        <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
-              <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
+              <td>{{ 'labels.inputs.External Id' | translate }}</td>
+              @if (savingsAccountData.externalId) {
+                <td>
+                  <mifosx-external-identifier
+                    externalId="{{ savingsAccountData.externalId }}"
+                  ></mifosx-external-identifier>
+                </td>
+              }
+              @if (!savingsAccountData.externalId) {
+                <td>{{ 'labels.inputs.Not Provided' | translate }}</td>
+              }
             </tr>
             <tr>
-              <td>{{ 'labels.inputs.Balance' | translate }}</td>
-              <td class="r-amount">
-                {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+              <td>
+                {{
+                  savingsAccountData.timeline.activatedOnDate
+                    ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                    : 'Not Activated'
+                }}
               </td>
             </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Currency' | translate }}</td>
+              <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
+            </tr>
           </tbody>
         </table>
       </div>
-    </ng-template>
-
-    <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
-      <table>
-        <tbody>
-          <tr *ngIf="savingsAccountData.summary.totalDeposits">
-            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
-            <td class="r-amount">
-              {{ savingsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
-            <td class="r-amount">
-              {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    }
   </div>
-
-  <div class="flex-49" *ngIf="isActive; else alternateSummary">
-    <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
-    <table>
-      <tbody>
-        <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-          <td>{{ 'labels.inputs.Withdrawals Fees' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-          <td>{{ 'labels.inputs.Annual Fees' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-          <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-          <td>{{ 'labels.inputs.Interest Posted' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-          <td>{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-          <td>{{ 'labels.inputs.Interest On Overdraft' | translate }}</td>
-          <td class="r-amount">
-            {{
-              savingsAccountData.summary.totalOverdraftInterestDerived
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-          <td>{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-          <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
-          <td class="r-amount">{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
-          <td>{{ savingsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
-          <td>{{ savingsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
-          <td>{{ savingsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
-        </tr>
-        <tr>
-          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
-          <td>{{ savingsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.withdrawalFee">
-          <td>{{ 'labels.inputs.Withdrawal Fee' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-          <td>{{ 'labels.inputs.Last Active Transaction Date' | translate }}</td>
-          <td>{{ savingsAccountData.lastActiveTransactionDate | dateFormat }}</td>
-        </tr>
-        <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-          <td>{{ 'labels.inputs.Substatus' | translate }}</td>
-          <td>{{ savingsAccountData.subStatus.value }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.daysToInactive">
-          <td>{{ 'labels.inputs.Days to Inactive' | translate }}</td>
-          <td>{{ savingsAccountData.daysToInactive }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.daysToDormancy">
-          <td>{{ 'labels.inputs.Days to Dormancy' | translate }}</td>
-          <td>{{ savingsAccountData.daysToDormancy }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.daysToEscheat">
-          <td>{{ 'labels.inputs.Days to Escheat' | translate }}</td>
-          <td>{{ savingsAccountData.daysToEscheat }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.annualFee">
-          <td>{{ 'labels.inputs.Annual Fee' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{ 'labels.inputs.Overdraft Limit' | translate }}</td>
-          <td class="r-amount">
-            {{ savingsAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</td>
-          <td>
-            {{
-              savingsAccountData.minOverdraftForInterestCalculation
-                | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-          <td>{{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}</td>
-          <td>{{ savingsAccountData.minBalanceForInterestCalculation | formatNumber }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.minRequiredBalance">
-          <td>{{ 'labels.inputs.Minimum Required Balance' | translate }}</td>
-          <td>{{ savingsAccountData.minRequiredBalance | formatNumber }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-          <td>{{ 'labels.inputs.Enforce Minimum Required Balance' | translate }}</td>
-          <td>{{ savingsAccountData.enforceMinRequiredBalance | yesNo }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-          <td>{{ 'labels.inputs.Interest Recalculation Date' | translate }}</td>
-          <td>{{ savingsAccountData.summary.lastInterestCalculationDate | dateFormat }}</td>
-        </tr>
-        <tr *ngIf="savingsAccountData.onHoldFunds">
-          <td>{{ 'labels.inputs.On Hold Funds' | translate }}</td>
-          <td>
-            <a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{
-              savingsAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2'
-            }}</a>
-          </td>
-        </tr>
-        <tr *ngIf="savingsAccountData.withHoldTax">
-          <td>{{ 'labels.inputs.Withhold Tax Group' | translate }}</td>
-          <td>{{ savingsAccountData.taxGroup.name }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <ng-template #alternateSummary>
-    <div class="flex-49">
-      <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
-      <table>
-        <tbody>
-          <tr>
-            <td>{{ 'labels.inputs.External Id' | translate }}</td>
-            <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
-            </td>
-            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
-            <td>
-              {{
-                savingsAccountData.timeline.activatedOnDate
-                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
-                  : 'Not Activated'
-              }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Currency' | translate }}</td>
-            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </ng-template>
-</div>
+}

src/app/savings/savings-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 { FormatNumberPipe } from '../../../pipes/format-number.pipe';
@@ -22,6 +22,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   isLoading = true;
   isActive = false;
   entityType: string;
@@ -29,10 +32,7 @@ export class GeneralTabComponent {
   savingsAccountData: any;
   currency: Currency;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsAccountData = data.savingsAccountData;
       this.currency = this.savingsAccountData.currency;

src/app/savings/savings-account-view/notes-tab/notes-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AuthenticationService } from 'app/core/authentication/authentication.service';
 import { SavingsService } from 'app/savings/savings.service';
@@ -15,15 +15,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class NotesTabComponent {
+  private route = inject(ActivatedRoute);
+  private savingsService = inject(SavingsService);
+  private authenticationService = inject(AuthenticationService);
+
   entityId: string;
   username: string;
   entityNotes: any;
 
-  constructor(
-    private route: ActivatedRoute,
-    private savingsService: SavingsService,
-    private authenticationService: AuthenticationService
-  ) {
+  constructor() {
     const savedCredentials = this.authenticationService.getCredentials();
     this.username = savedCredentials.username;
     this.entityId = this.route.parent.snapshot.params['savingAccountId'];

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -16,18 +16,20 @@
         <mat-card-title class="layout-row layout-lt-md-column">
           <div class="flex-60">
             <h3>
-              <i
-                class="fa fa-stop"
-                [ngClass]="savingsAccountData.status.code | statusLookup"
-                [matTooltip]="savingsAccountData.status.value"
-                *ngIf="!savingsAccountData.subStatus.block"
-              ></i>
-              <i
-                class="fa fa-stop"
-                [ngClass]="savingsAccountData.subStatus.value | statusLookup"
-                [matTooltip]="savingsAccountData.subStatus.value"
-                *ngIf="savingsAccountData.subStatus.block"
-              ></i>
+              @if (!savingsAccountData.subStatus.block) {
+                <i
+                  class="fa fa-stop"
+                  [ngClass]="savingsAccountData.status.code | statusLookup"
+                  [matTooltip]="savingsAccountData.status.value"
+                ></i>
+              }
+              @if (savingsAccountData.subStatus.block) {
+                <i
+                  class="fa fa-stop"
+                  [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+                  [matTooltip]="savingsAccountData.subStatus.value"
+                ></i>
+              }
               <span class="m-r-5">{{ 'labels.inputs.Savings Product' | translate }} :</span>
               <span class="m-r-5"
                 ><mifosx-long-text textValue="{{ savingsAccountData.savingsProductName }}"></mifosx-long-text
@@ -40,38 +42,40 @@
             <span class="account-overview">
               {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
               {{ savingsAccountData.clientName || savingsAccountData.groupName }}
-              <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">
-                <mifosx-account-number accountNo="{{ savingsAccountData.clientAccountNo }}"></mifosx-account-number>
-              </span>
+              @if (savingsAccountData.clientAccountNo) {
+                <span class="m-l-10">
+                  <mifosx-account-number accountNo="{{ savingsAccountData.clientAccountNo }}"></mifosx-account-number>
+                </span>
+              }
             </span>
           </div>
 
-          <div
-            class="flex-30"
-            *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval"
-          >
-            <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
-            <table class="account-overview">
-              <tbody>
-                <tr>
-                  <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
-                  <td class="r-amount">
-                    {{
-                      savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                    }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>{{ 'labels.inputs.Available Balance' | translate }}</td>
-                  <td class="r-amount">
-                    {{
-                      savingsAccountData.summary.availableBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                    }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+          @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) {
+            <div class="flex-30">
+              <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
+              <table class="account-overview">
+                <tbody>
+                  <tr>
+                    <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                    <td class="r-amount">
+                      {{
+                        savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>{{ 'labels.inputs.Available Balance' | translate }}</td>
+                    <td class="r-amount">
+                      {{
+                        savingsAccountData.summary.availableBalance
+                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          }
 
           <div class="flex-5">
             <button
@@ -89,102 +93,107 @@
       </div>
 
       <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let item of buttonConfig.singleButtons">
+        @for (item of buttonConfig.singleButtons; track item) {
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
             <mat-icon matListIcon>
               <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
             </mat-icon>
             <span> {{ 'labels.menus.' + item.name | translate }} </span>
           </button>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="buttonConfig.options && !savingsAccountData.subStatus.block">
+        @if (buttonConfig.options && !savingsAccountData.subStatus.block) {
           <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
-            <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
-                {{ 'labels.menus.' + option.name | translate }}
-              </button>
-            </span>
+            @for (option of buttonConfig.options; track option) {
+              <span>
+                <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                  {{ 'labels.menus.' + option.name | translate }}
+                </button>
+              </span>
+            }
           </mat-menu>
-        </ng-container>
+        }
       </mat-menu>
     </mat-card-title-group>
   </mat-card-header>
 
   <mat-card-content class="content">
-    <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive" [tabPanel]="tabPanel">
-      <a
-        mat-tab-link
-        [routerLink]="['./general']"
-        routerLinkActive
-        #general="routerLinkActive"
-        [active]="general.isActive"
-      >
-        {{ 'labels.inputs.General' | translate }}
-      </a>
-      <a
-        mat-tab-link
-        [routerLink]="['./transactions']"
-        routerLinkActive
-        #transactions="routerLinkActive"
-        [active]="transactions.isActive"
-      >
-        {{ 'labels.inputs.Transactions' | translate }}
-      </a>
-      <a
-        mat-tab-link
-        [routerLink]="['./charges']"
-        routerLinkActive
-        #charges="routerLinkActive"
-        [active]="charges.isActive"
-      >
-        {{ 'labels.inputs.Charges' | translate }}
-      </a>
-      <a
-        mat-tab-link
-        [routerLink]="['./documents']"
-        routerLinkActive
-        #savingsDocuments="routerLinkActive"
-        [active]="savingsDocuments.isActive"
-      >
-        {{ 'labels.inputs.Documents' | translate }}
-      </a>
-      <a
-        mat-tab-link
-        *mifosxHasPermission="'READ_SAVINGSNOTE'"
-        [routerLink]="['./notes']"
-        routerLinkActive
-        #notes="routerLinkActive"
-        [active]="notes.isActive"
-      >
-        {{ 'labels.inputs.Notes' | translate }}
-      </a>
-      <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
+    @if (isActive) {
+      <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
         <a
           mat-tab-link
-          [routerLink]="['./standing-instructions']"
+          [routerLink]="['./general']"
           routerLinkActive
-          #standingInstructions="routerLinkActive"
-          [active]="standingInstructions.isActive"
-          *ngIf="savingsAccountData.clientId"
+          #general="routerLinkActive"
+          [active]="general.isActive"
         >
-          {{ 'labels.inputs.Standing Instructions' | translate }}
+          {{ 'labels.inputs.General' | translate }}
         </a>
-      </ng-container>
-      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
         <a
           mat-tab-link
-          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+          [routerLink]="['./transactions']"
           routerLinkActive
-          #datatable="routerLinkActive"
-          [active]="datatable.isActive"
+          #transactions="routerLinkActive"
+          [active]="transactions.isActive"
         >
-          {{ savingsDatatable.registeredTableName }}
+          {{ 'labels.inputs.Transactions' | translate }}
         </a>
-      </ng-container>
-    </nav>
+        <a
+          mat-tab-link
+          [routerLink]="['./charges']"
+          routerLinkActive
+          #charges="routerLinkActive"
+          [active]="charges.isActive"
+        >
+          {{ 'labels.inputs.Charges' | translate }}
+        </a>
+        <a
+          mat-tab-link
+          [routerLink]="['./documents']"
+          routerLinkActive
+          #savingsDocuments="routerLinkActive"
+          [active]="savingsDocuments.isActive"
+        >
+          {{ 'labels.inputs.Documents' | translate }}
+        </a>
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_SAVINGSNOTE'"
+          [routerLink]="['./notes']"
+          routerLinkActive
+          #notes="routerLinkActive"
+          [active]="notes.isActive"
+        >
+          {{ 'labels.inputs.Notes' | translate }}
+        </a>
+        <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
+          @if (savingsAccountData.clientId) {
+            <a
+              mat-tab-link
+              [routerLink]="['./standing-instructions']"
+              routerLinkActive
+              #standingInstructions="routerLinkActive"
+              [active]="standingInstructions.isActive"
+            >
+              {{ 'labels.inputs.Standing Instructions' | translate }}
+            </a>
+          }
+        </ng-container>
+        @for (savingsDatatable of savingsDatatables; track savingsDatatable) {
+          <a
+            mat-tab-link
+            *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+            [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+            routerLinkActive
+            #datatable="routerLinkActive"
+            [active]="datatable.isActive"
+          >
+            {{ savingsDatatable.registeredTableName }}
+          </a>
+        }
+      </nav>
+    }
 
     <mat-tab-nav-panel #tabPanel>
       <router-outlet></router-outlet>

src/app/savings/savings-account-view/savings-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';
 
@@ -27,7 +27,7 @@ import {
   MatCardContent
 } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
-import { NgIf, NgClass, NgFor, CurrencyPipe } from '@angular/common';
+import { NgClass, CurrencyPipe } from '@angular/common';
 import { LongTextComponent } from '../../shared/long-text/long-text.component';
 import { AccountNumberComponent } from '../../shared/account-number/account-number.component';
 import { MatIconButton } from '@angular/material/button';
@@ -71,6 +71,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountViewComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private savingsService = inject(SavingsService);
+  private translateService = inject(TranslateService);
+  dialog = inject(MatDialog);
+
   /** Savings Account Data */
   savingsAccountData: any;
   /** Savings Data Tables */
@@ -89,13 +95,7 @@ export class SavingsAccountViewComponent implements OnInit {
    * @param {Router} router Router
    * @param {SavingsService} savingsService Savings Service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private savingsService: SavingsService,
-    private translateService: TranslateService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsAccountData: any; savingsDatatables: any }) => {
       this.savingsAccountData = data.savingsAccountData;
       this.currency = this.savingsAccountData.currency;

src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { SavingsService } from 'app/savings/savings.service';
@@ -17,6 +17,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsDocumentsTabComponent {
+  private route = inject(ActivatedRoute);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+  dialog = inject(MatDialog);
+
   /** Stores the resolved savings documents data */
   entityDocuments: any;
   /** Stores the saving Account Id */
@@ -27,12 +32,7 @@ export class SavingsDocumentsTabComponent {
    * Retrieves the savings data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsDocuments: any }) => {
       this.setSavingsDocumentsData(data.savingsDocuments);
     });

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

@@ -47,29 +47,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/savings/savings-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 savingsService = inject(SavingsService);
+  private dialog = inject(MatDialog);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Data */
   savingsData: any;
   /** Instructions Data */
@@ -76,13 +82,7 @@ export class StandingInstructionsTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private route: ActivatedRoute,
-    private savingsService: SavingsService,
-    private dialog: MatDialog,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsData = data.savingsAccountData;
     });

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html

@@ -45,4 +45,6 @@
   </div>
 </form>
 
-<iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>
+@if (!hideOutput) {
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>
+}

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -24,6 +24,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ExportTransactionsComponent implements OnInit {
+  private sanitizer = inject(DomSanitizer);
+  private reportsService = inject(ReportsService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -46,14 +53,7 @@ export class ExportTransactionsComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private sanitizer: DomSanitizer,
-    private reportsService: ReportsService,
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsAccountId = data.savingsAccountData.accountNo;
     });

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -1,17 +1,19 @@
 <div class="container">
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
     <div class="layout-row align-end">
-      <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
-        >
-        <button mat-raised-button color="primary" [routerLink]="['export']">
-          {{ 'labels.buttons.Export' | translate }}
-        </button>
-      </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
+          >
+          <button mat-raised-button color="primary" [routerLink]="['export']">
+            {{ 'labels.buttons.Export' | translate }}
+          </button>
+        </div>
+      }
     </div>
 
     <table mat-table [dataSource]="dataSource" matSort>
@@ -118,16 +120,18 @@
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
               <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
-            <span *ngIf="!transaction.reversed">
-              <button
-                mat-menu-item
-                *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'"
-                (click)="undoTransaction(transaction, $event)"
-              >
-                <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-                <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
-              </button>
-            </span>
+            @if (!transaction.reversed) {
+              <span>
+                <button
+                  mat-menu-item
+                  *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'"
+                  (click)="undoTransaction(transaction, $event)"
+                >
+                  <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+                  <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
+                </button>
+              </span>
+            }
             <button
               mat-menu-item
               class="account-action-button"

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -26,7 +26,7 @@ import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { UndoTransactionDialogComponent } from '../custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component';
@@ -73,6 +73,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class TransactionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+  private dialog = inject(MatDialog);
+  private dateUtils = inject(Dates);
+
   /** Savings Account Status */
   status: any;
   /** Transactions Data */
@@ -105,14 +112,7 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves savings account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService,
-    private dialog: MatDialog,
-    private dateUtils: Dates
-  ) {
+  constructor() {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.transactionsData = data.savingsAccountData.transactions;
       this.status = data.savingsAccountData.status.value;

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

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

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.ts

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

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -18,6 +18,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewRecieptComponent implements OnInit {
+  private sanitizer = inject(DomSanitizer);
+  private route = inject(ActivatedRoute);
+
   /** trusted resource url for pentaho output */
   pentahoUrl: any;
   /** Transaction Reciept Data */
@@ -28,10 +31,7 @@ export class ViewRecieptComponent implements OnInit {
    * @param {DomSanitizer} sanitizer DOM Sanitizer
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(
-    private sanitizer: DomSanitizer,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { savingsTransactionReciept: any }) => {
       this.transactionRecieptData = data.savingsTransactionReciept;
     });

src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, 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';
@@ -13,13 +13,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableTransactionTabComponent {
+  private route = inject(ActivatedRoute);
+
   /** Transaction Id */
   entityId: string;
   /** Savings Datatable */
   entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.entityId = this.route.parent.parent.snapshot.paramMap.get('id');
     this.route.data.subscribe((data: { transactionDatatable: any }) => {
       this.entityDatatable = data.transactionDatatable;

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -1,48 +1,49 @@
 <div class="container transaction-buttons m-b-20 align-end-center gap-2percent" align="end">
-  <span
-    *ngIf="
-      !(
-        transactionData.interestedPostedAsOn === false &&
-        (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3)
-      )
-    "
-  >
-    <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-      <button
-        mat-raised-button
-        color="primary"
-        *ngIf="
+  @if (
+    !(
+      transactionData.interestedPostedAsOn === false &&
+      (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3)
+    )
+  ) {
+    <span>
+      <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
+        @if (
           transactionData.transactionType.value === 'Transfer' ||
           transactionData.reversed === 'true' ||
           transactionData.transactionType.id === 3 ||
           transactionData.transactionType.id === 17
-        "
-        [routerLink]="'edit'"
+        ) {
+          <button mat-raised-button color="primary" [routerLink]="'edit'">
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+          </button>
+        }
+      </span>
+    </span>
+  }
+  @if (!transactionData.reversed && transactionData.transactionType.amountHold) {
+    <span>
+      <button
+        mat-raised-button
+        color="primary"
+        *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
+        (click)="releaseAmount()"
       >
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Release Amount' | translate }}
       </button>
     </span>
-  </span>
-  <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
-    <button
-      mat-raised-button
-      color="primary"
-      *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
-      (click)="releaseAmount()"
-    >
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Release Amount' | translate }}
-    </button>
-  </span>
-  <span *ngIf="allowUndo()">
-    <button
-      mat-raised-button
-      color="warn"
-      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()"
-    >
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
-    </button>
-  </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>{{ 'labels.buttons.Undo' | translate }}
+      </button>
+    </span>
+  }
 </div>
 
 <div class="container">
@@ -91,19 +92,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/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -6,7 +6,7 @@ import { ReleaseAmountDialogComponent } from 'app/savings/savings-account-view/c
 import { UndoTransactionDialogComponent } from 'app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
 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';
@@ -26,18 +26,18 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsTransactionGeneralTabComponent {
+  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;
   transactionData: any;
 
-  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: { savingsAccountTransaction: any }) => {
       this.accountId = this.route.parent.snapshot.params['savingAccountId'];
       this.transactionData = data.savingsAccountTransaction;

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -9,7 +9,7 @@
     >
       {{ 'labels.heading.General' | translate }}
     </a>
-    <ng-container *ngFor="let entityDatatable of entityDatatables">
+    @for (entityDatatable of entityDatatables; track entityDatatable) {
       <a
         mat-tab-link
         [routerLink]="['./datatables', entityDatatable.registeredTableName]"
@@ -20,7 +20,7 @@
       >
         {{ entityDatatable.registeredTableName }}
       </a>
-    </ng-container>
+    }
   </nav>
 
   <mat-tab-nav-panel #tabPanel>

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
@@ -19,6 +19,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewTransactionComponent {
+  private route = inject(ActivatedRoute);
+  dialog = inject(MatDialog);
+
   /** Transaction data. */
   transactionData: any;
 
@@ -30,10 +33,7 @@ export class ViewTransactionComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private route: ActivatedRoute,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { transactionDatatables: any }) => {
       this.accountId = this.route.snapshot.params['savingAccountId'];
       this.entityDatatables = data.transactionDatatables;

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -1,41 +1,56 @@
-<div
-  *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
-  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
->
-  <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
-    <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-    Pay
-  </button>
-  <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
-    <fa-icon icon="flag" class="m-r-10"></fa-icon>
-    Waive
-  </button>
-  <span *ngIf="isRecurringCharge()">
+@if (savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0) {
+  <div class="layout-row align-end gap-2percent layout-xs-column container m-b-20">
+    <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
+      <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
+      Pay
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+      (click)="waiveCharge()"
+    >
+      <fa-icon icon="flag" class="m-r-10"></fa-icon>
+      Waive
+    </button>
+    @if (isRecurringCharge()) {
+      <span>
+        <button
+          mat-raised-button
+          color="warn"
+          *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+          (click)="inactivateCharge()"
+        >
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>
+          Inactivate
+        </button>
+      </span>
+    }
+  </div>
+}
+
+@if (savingsAccountData.status.value === 'Submitted and pending approval') {
+  <div class="layout-row align-end gap-2percent layout-xs-column container m-b-20">
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+      (click)="editCharge()"
+    >
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
+      Edit
+    </button>
     <button
       mat-raised-button
       color="warn"
-      *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
-      (click)="inactivateCharge()"
+      *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+      (click)="deleteCharge()"
     >
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Inactivate
+      Delete
     </button>
-  </span>
-</div>
-
-<div
-  *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
-  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
->
-  <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
-  </button>
-  <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
-    <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
-  </button>
-</div>
+  </div>
+}
 
 <div class="container">
   <mat-card>

src/app/savings/savings-account-view/view-charge/view-charge.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -38,6 +38,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewChargeComponent {
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
   /** Charge data. */
   chargeData: any;
   /** Savings Account Data */
@@ -52,14 +59,7 @@ export class ViewChargeComponent {
    * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Setting service
    */
-  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: { savingsAccountCharge: any }) => {
       this.chargeData = data.savingsAccountCharge;
     });
@@ -87,7 +87,6 @@ export class ViewChargeComponent {
         type: 'date',
         required: true
       })
-
     ];
     const data = {
       title: 'Pay Charge',
@@ -160,7 +159,6 @@ export class ViewChargeComponent {
         type: 'number',
         required: true
       })
-
     ];
     const data = {
       title: 'Edit Charge',

src/app/savings/savings.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class SavingsService {
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @param {string} savingAccountId is saving account's Id.