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/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'];
   }