Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -3,11 +3,13 @@
    <div class="m-b-10">
      <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
    </div>
-    <div class="action-button m-b-20" *ngIf="this.chargesData">
-      <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
-      </button>
-    </div>
+    @if (this.chargesData) {
+      <div class="action-button m-b-20">
+        <button mat-raised-button color="primary" (click)="toggleCharges()">
+          {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
+        </button>
+      </div>
+    }
  </div>

  <div class="mat-elevation-z1 m-b-25">
@@ -81,62 +83,66 @@
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
-          <span *ngIf="fixedDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); editCharge(charge)"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); deleteCharge(charge.id)"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-          </span>
-          <span *ngIf="fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); payCharge(charge.id)"
-            >
-              <i class="fa fa-dollar"></i>
-            </button>
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
-              (click)="routeEdit($event); waiveCharge(charge.id)"
-            >
-              <i class="fa fa-flag"></i>
-            </button>
-            <ng-container *ngIf="isRecurringCharge(charge)">
+          @if (fixedDepositsAccountData.status.value === 'Submitted and pending approval') {
+            <span>
              <button
                class="account-action-button"
                mat-raised-button
                color="primary"
-                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
-                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); inactivateCharge(charge.id)"
+                matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+                *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); editCharge(charge)"
              >
-                <i class="fa fa-ban"></i>
+                <i class="fa fa-pencil"></i>
              </button>
-            </ng-container>
-          </span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="warn"
+                matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+                *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); deleteCharge(charge.id)"
+              >
+                <i class="fa fa-trash"></i>
+              </button>
+            </span>
+          }
+          @if (fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0) {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+                *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); payCharge(charge.id)"
+              >
+                <i class="fa fa-dollar"></i>
+              </button>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+                *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); waiveCharge(charge.id)"
+              >
+                <i class="fa fa-flag"></i>
+              </button>
+              @if (isRecurringCharge(charge)) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+                  *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+                  (click)="routeEdit($event); inactivateCharge(charge.id)"
+                >
+                  <i class="fa fa-ban"></i>
+                </button>
+              }
+            </span>
+          }
        </td>
      </ng-container>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -62,6 +62,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ChargesTabComponent implements OnInit {
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
  /** Fixed Deposits Account Data */
  fixedDepositsAccountData: any;
  /** Charges Data */
@@ -97,14 +104,7 @@ export class ChargesTabComponent implements OnInit {
   * @param {Dates} dateUtils Date Utils.
   * @param {SettingsService} settingsService Settings Service.
   */
-  constructor(
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
      this.chargesData = this.fixedDepositsAccountData.charges;
@@ -151,7 +151,6 @@ export class ChargesTabComponent implements OnInit {
        type: 'date',
        required: true
      })
-
    ];
    const data = {
      title: `Pay Charge ${chargeId}`,
@@ -225,7 +224,6 @@ export class ChargesTabComponent implements OnInit {
        type: 'number',
        required: true
      })
-
    ];
    const data = {
      title: `Edit Charge ${charge.id}`,
@@ -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);
 }
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
  MatDialogRef,
  MAT_DIALOG_DATA,
@@ -28,11 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class InactivateChargeDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<InactivateChargeDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<InactivateChargeDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }
@@ -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);
 }
@@ -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);
 }
@@ -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);
 }
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EntityDatatableTabComponent } from '../../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -17,6 +17,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class DatatableTabsComponent {
+  private route = inject(ActivatedRoute);
+
  entityId: string;
  /** Savings Datatable */
  entityDatatable: any;
@@ -27,7 +29,7 @@ export class DatatableTabsComponent {
   * Fetches Savings and datatables data from `resolve`
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.entityId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');

    this.route.data.subscribe((data: { savingsDatatable: any }) => {
@@ -29,42 +29,44 @@
              <span class="account-overview">
                <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
                {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
-                <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
-                  <mifosx-account-number
-                    accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
-                  ></mifosx-account-number>
-                </span>
+                @if (fixedDepositsAccountData.clientAccountNo) {
+                  <span class="m-l-10">
+                    <mifosx-account-number
+                      accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
+                    ></mifosx-account-number>
+                  </span>
+                }
              </span>
            </div>

-            <div
-              *ngIf="
-                !fixedDepositsAccountData.status.rejected &&
-                !fixedDepositsAccountData.status.submittedAndPendingApproval
-              "
-              class="flex-30"
-            >
-              <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
-              <table class="account-overview flex-100">
-                <tbody>
-                  <tr>
-                    <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
-                    <td class="r-amount flex-30">
-                      {{
-                        fixedDepositsAccountData.summary.accountBalance
-                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                      }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                    <td class="r-amount flex-30">
-                      {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            @if (
+              !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
+            ) {
+              <div class="flex-30">
+                <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
+                <table class="account-overview flex-100">
+                  <tbody>
+                    <tr>
+                      <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                      <td class="r-amount flex-30">
+                        {{
+                          fixedDepositsAccountData.summary.accountBalance
+                            | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                      <td class="r-amount flex-30">
+                        {{
+                          fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                        }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            }

            <div class="flex-5">
              <button
@@ -83,20 +85,22 @@
      </div>

      <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let button of buttonConfig.singleButtons">
+        @for (button of buttonConfig.singleButtons; track button) {
          <button mat-menu-item (click)="doAction(button.name)">
            <i ngClass="{{ button.icon }}"></i> {{ button.name | translateKey: 'menus' }}
          </button>
-        </ng-container>
+        }

-        <ng-container *ngIf="buttonConfig.options.length">
+        @if (buttonConfig.options.length) {
          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'More' | translateKey: 'menus' }}</button>
          <mat-menu #More="matMenu">
-            <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</button>
-            </span>
+            @for (option of buttonConfig.options; track option) {
+              <span>
+                <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</button>
+              </span>
+            }
          </mat-menu>
-        </ng-container>
+        }
      </mat-menu>
    </mat-card-title-group>
  </mat-card-header>
@@ -121,17 +125,19 @@
      >
        {{ 'labels.inputs.Interest Rate Chart' | translate }}
      </a>
-      <span *ngIf="showTransactions">
-        <a
-          mat-tab-link
-          [routerLink]="['./transactions']"
-          routerLinkActive
-          #transactions="routerLinkActive"
-          [active]="transactions.isActive"
-        >
-          {{ 'labels.inputs.Transactions' | translate }}
-        </a>
-      </span>
+      @if (showTransactions) {
+        <span>
+          <a
+            mat-tab-link
+            [routerLink]="['./transactions']"
+            routerLinkActive
+            #transactions="routerLinkActive"
+            [active]="transactions.isActive"
+          >
+            {{ 'labels.inputs.Transactions' | translate }}
+          </a>
+        </span>
+      }
      <a
        mat-tab-link
        [routerLink]="['./charges']"
@@ -141,17 +147,18 @@
      >
        {{ 'labels.inputs.Charges' | translate }}
      </a>
-      <a
-        mat-tab-link
-        [routerLink]="['./standing-instructions']"
-        routerLinkActive
-        #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive"
-        *ngIf="fixedDepositsAccountData.clientId"
-      >
-        {{ 'labels.inputs.Standing Instructions' | translate }}
-      </a>
-      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
+      @if (fixedDepositsAccountData.clientId) {
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instructions']"
+          routerLinkActive
+          #standingInstructions="routerLinkActive"
+          [active]="standingInstructions.isActive"
+        >
+          {{ 'labels.inputs.Standing Instructions' | translate }}
+        </a>
+      }
+      @for (savingsDatatable of savingsDatatables; track savingsDatatable) {
        <a
          mat-tab-link
          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
@@ -162,7 +169,7 @@
        >
          {{ savingsDatatable.registeredTableName }}
        </a>
-      </ng-container>
+      }
    </nav>

    <mat-tab-nav-panel #tabPanel>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';

@@ -25,7 +25,7 @@ import {
  MatCardContent
 } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
-import { NgClass, NgIf, NgFor, CurrencyPipe } from '@angular/common';
+import { NgClass, CurrencyPipe } from '@angular/common';
 import { AccountNumberComponent } from '../../../shared/account-number/account-number.component';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -67,6 +67,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class FixedDepositAccountViewComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private savingsService = inject(SavingsService);
+  dialog = inject(MatDialog);
+
  /** Fixed Deposits Account Data */
  fixedDepositsAccountData: any;
  /** Savings Data Tables */
@@ -86,13 +92,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
   * @param {SavingsService} savingsService Savings Service
   * @param {MatDialog} dialog Mat Dialog
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private fixedDepositsService: FixedDepositsService,
-    private savingsService: SavingsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { fixedDepositsAccountData: any; savingsDatatables: any }) => {
      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
      this.savingsDatatables = data.savingsDatatables;
@@ -7,15 +7,19 @@
          <tr>
            <td>{{ 'labels.inputs.External Id' | translate }}</td>
            <td>
-              <span *ngIf="fixedDepositsAccountData.externalId">
-                <mifosx-external-identifier
-                  externalId="{{ fixedDepositsAccountData.externalId }}"
-                  completed="true"
-                ></mifosx-external-identifier>
-              </span>
-              <span *ngIf="!fixedDepositsAccountData.externalId">
-                {{ 'labels.inputs.Not Available' | translate }}
-              </span>
+              @if (fixedDepositsAccountData.externalId) {
+                <span>
+                  <mifosx-external-identifier
+                    externalId="{{ fixedDepositsAccountData.externalId }}"
+                    completed="true"
+                  ></mifosx-external-identifier>
+                </span>
+              }
+              @if (!fixedDepositsAccountData.externalId) {
+                <span>
+                  {{ 'labels.inputs.Not Available' | translate }}
+                </span>
+              }
            </td>
          </tr>
          <tr>
@@ -28,10 +32,12 @@
              }}
            </td>
          </tr>
-          <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-            <td>{{ 'labels.inputs.Closed On' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
-          </tr>
+          @if (fixedDepositsAccountData.timeline.closedOnDate) {
+            <tr>
+              <td>{{ 'labels.inputs.Closed On' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
+            </tr>
+          }
          <tr>
            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
            <td>
@@ -56,14 +62,18 @@
              }}
            </td>
          </tr>
-          <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-            <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.onAccountClosure">
-            <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
-            <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
-          </tr>
+          @if (fixedDepositsAccountData.withHoldTax) {
+            <tr>
+              <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
+            </tr>
+          }
+          @if (fixedDepositsAccountData.onAccountClosure) {
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
+              <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
+            </tr>
+          }
        </tbody>
      </table>
    </div>
@@ -92,68 +102,74 @@
            <td>{{ 'labels.inputs.No. of Days in Year' | translate }}</td>
            <td>{{ fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
          </tr>
-          <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-            <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
-            <td>
-              {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
-              {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
-            </td>
-          </tr>
+          @if (fixedDepositsAccountData.preClosurePenalApplicable) {
+            <tr>
+              <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
+              <td>
+                {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
+                {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+              </td>
+            </tr>
+          }
        </tbody>
      </table>
    </div>
  </div>

  <div class="flex-49">
-    <div
-      *ngIf="
-        !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval;
-        else otherDetails
-      "
-    >
-      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
-      <table>
-        <tbody>
-          <tr>
-            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
-            <td class="r-amount">
-              {{ fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-            <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
-            <td class="r-amount">
-              {{
-                fixedDepositsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
-              }}
-            </td>
-          </tr>
-          <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
-            <td class="r-amount">
-              {{
-                fixedDepositsAccountData.summary.totalInterestEarned
-                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
-              }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <ng-template #otherDetails>
+    @if (!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval) {
+      <div>
+        <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
+            </tr>
+            <tr>
+              <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
+            </tr>
+            @if (fixedDepositsAccountData.summary.totalDeposits) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (fixedDepositsAccountData.summary.totalWithdrawals) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalWithdrawals
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+            @if (fixedDepositsAccountData.summary.totalInterestEarned >= 0) {
+              <tr>
+                <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+                <td class="r-amount">
+                  {{
+                    fixedDepositsAccountData.summary.totalInterestEarned
+                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                  }}
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    } @else {
      <div>
        <h4 class="table-headers">{{ 'labels.heading.Other Details' | translate }}</h4>
        <table>
@@ -173,6 +189,6 @@
          </tbody>
        </table>
      </div>
-    </ng-template>
+    }
  </div>
 </div>
@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Currency } from 'app/shared/models/general.model';
-import { NgIf, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { ExternalIdentifierComponent } from '../../../../shared/external-identifier/external-identifier.component';
 import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -18,14 +18,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  fixedDepositsAccountData: any;
  entityType: string;
  currency: Currency;

-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
      this.currency = this.fixedDepositsAccountData.currency;
@@ -1,5 +1,5 @@
 // ** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
@@ -30,8 +30,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
    trigger('expandChartSlab', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
  ],
  imports: [
    ...STANDALONE_SHARED_IMPORTS,
@@ -52,6 +52,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class InterestRateChartTabComponent {
+  private route = inject(ActivatedRoute);
+
  /** Fixed Deposits Account Status */
  status: any;
  /** Interest Rate Chart Data */
@@ -82,7 +84,7 @@ export class InterestRateChartTabComponent {
   * Retrieves fixed deposits account data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.interestRateChartData = data.fixedDepositsAccountData.accountChart.chartSlabs;
    });
@@ -46,29 +46,33 @@
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
        <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value !== 'Deleted'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-            >
-              <i class="fa fa-edit"></i>
-            </button>
-          </span>
-          <span *ngIf="instruction.status.value !== 'Deleted'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
-              (click)="deleteStandingInstruction(instruction.id)"
-            >
-              <i class="fa fa-times"></i>
-            </button>
-          </span>
+          @if (instruction.status.value !== 'Deleted') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+                *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+              >
+                <i class="fa fa-edit"></i>
+              </button>
+            </span>
+          }
+          @if (instruction.status.value !== 'Deleted') {
+            <span>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="warn"
+                matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+                *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+                (click)="deleteStandingInstruction(instruction.id)"
+              >
+                <i class="fa fa-times"></i>
+              </button>
+            </span>
+          }
          <button
            class="account-action-button"
            mat-raised-button
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
  MatTableDataSource,
@@ -51,6 +51,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class StandingInstructionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dialog = inject(MatDialog);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+
  /** Fixed Deposits Data */
  fixedDepositsData: any;
  /** Instructions Data */
@@ -79,13 +85,7 @@ export class StandingInstructionsTabComponent implements OnInit {
   * @param {AccountTransfersService} accountTransfersService Accounts Transfer Service
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private route: ActivatedRoute,
-    private fixedDepositsService: FixedDepositsService,
-    private dialog: MatDialog,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.fixedDepositsData = data.fixedDepositsAccountData;
    });
@@ -4,14 +4,16 @@
      <div class="m-b-20">
        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
      </div>
-      <div class="action-button m-b-20 layout-row gap-20px" *ngIf="checkStatus()">
-        <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
-        >
-        <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
-        >
-      </div>
+      @if (checkStatus()) {
+        <div class="action-button m-b-20 layout-row gap-20px">
+          <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
+            {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+          >
+          <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
+            {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+          >
+        </div>
+      }
    </div>

    <table mat-table [dataSource]="dataSource">
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -19,7 +19,7 @@ import {
 } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -61,6 +61,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class TransactionsTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
  accountId: string;
  status: any;
  /** Transactions Data */
@@ -89,11 +93,7 @@ export class TransactionsTabComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route.
   * @param {Router} router Router
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
+  constructor() {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.transactionsData = data.fixedDepositsAccountData.transactions;
      this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
@@ -1,14 +1,16 @@
 <div class="container m-b-20 align-end-center gap-2percent">
-  <span *ngIf="allowUndo()">
-    <button
-      mat-raised-button
-      color="warn"
-      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()"
-    >
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
-    </button>
-  </span>
+  @if (allowUndo()) {
+    <span>
+      <button
+        mat-raised-button
+        color="warn"
+        *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+        (click)="undoTransaction()"
+      >
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+      </button>
+    </span>
+  }
 </div>
 <div class="container">
  <mat-card>
@@ -56,19 +58,22 @@
          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
        </div>

-        <div class="flex-50 mat-body-strong" *ngIf="transactionData.note">
-          {{ 'labels.inputs.Note' | translate }}
-        </div>
+        @if (transactionData.note) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Note' | translate }}
+          </div>
+        }

-        <div class="flex-50" *ngIf="transactionData.note">
-          {{ transactionData.note }}
-        </div>
+        @if (transactionData.note) {
+          <div class="flex-50">
+            {{ transactionData.note }}
+          </div>
+        }

-        <mifosx-transaction-payment-detail
-          *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData"
-        >
-        </mifosx-transaction-payment-detail>
+        @if (transactionData.paymentDetailData) {
+          <mifosx-transaction-payment-detail [paymentDetailData]="transactionData.paymentDetailData">
+          </mifosx-transaction-payment-detail>
+        }
      </div>

      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
@@ -1,12 +1,12 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { UndoTransactionDialogComponent } from 'app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
 import { Dates } from 'app/core/utils/dates';
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { NgIf, NgClass, CurrencyPipe } from '@angular/common';
+import { NgClass, CurrencyPipe } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TransactionPaymentDetailComponent } from '../../../../shared/transaction-payment-detail/transaction-payment-detail.component';
 import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewTransactionComponent {
+  private savingsService = inject(SavingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
  accountId: string;
  transactionId: string;
  /** Transaction data. */
@@ -36,14 +43,7 @@ export class ViewTransactionComponent {

  /**
   */
-  constructor(
-    private savingsService: SavingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { fixedDepositsAccountTransaction: any }) => {
      this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
      this.transactionData = data.fixedDepositsAccountTransaction;