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/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
@@ -24,6 +24,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountDetailsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
   /** Savings Account Template */
   @Input() savingsAccountTemplate: any;
 
@@ -51,11 +55,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
    * @param {SavingsService} savingsService Savings Service.
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createSavingsAccountDetailsForm();
   }
 

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

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

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

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

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

@@ -22,12 +22,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option
-          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
-          [value]="interestCompoundingPeriodType.id"
-        >
-          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCompoundingPeriodType of interestCompoundingPeriodTypeData; track interestCompoundingPeriodType) {
+          <mat-option [value]="interestCompoundingPeriodType.id">
+            {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -38,12 +37,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option
-          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
-          [value]="interestPostingPeriodType.id"
-        >
-          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestPostingPeriodType of interestPostingPeriodTypeData; track interestPostingPeriodType) {
+          <mat-option [value]="interestPostingPeriodType.id">
+            {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -54,12 +52,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option
-          *ngFor="let interestCalculationType of interestCalculationTypeData"
-          [value]="interestCalculationType.id"
-        >
-          {{ interestCalculationType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCalculationType of interestCalculationTypeData; track interestCalculationType) {
+          <mat-option [value]="interestCalculationType.id">
+            {{ interestCalculationType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
@@ -70,12 +67,14 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option
-          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
-          [value]="interestCalculationDaysInYearType.id"
-        >
-          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (
+          interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData;
+          track interestCalculationDaysInYearType
+        ) {
+          <mat-option [value]="interestCalculationDaysInYearType.id">
+            {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
@@ -102,12 +101,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option
-          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id"
-        >
-          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
+          <mat-option [value]="lockinPeriodFrequencyType.id">
+            {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -119,25 +117,22 @@
       {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
     </mat-checkbox>
 
-    <div
-      *ngIf="savingsAccountTermsForm.value.allowOverdraft"
-      class="flex-fill layout-row-wrap gap-2percent responsive-column"
-    >
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
-        <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
-      </mat-form-field>
-
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
-        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
-      </mat-form-field>
-
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
-        <input type="number" matInput formControlName="overdraftLimit" />
-      </mat-form-field>
-    </div>
+    @if (savingsAccountTermsForm.value.allowOverdraft) {
+      <div class="flex-fill layout-row-wrap gap-2percent responsive-column">
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
+          <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
+        </mat-form-field>
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
+          <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
+        </mat-form-field>
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
+          <input type="number" matInput formControlName="overdraftLimit" />
+        </mat-form-field>
+      </div>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
@@ -150,10 +145,12 @@
       <input type="number" matInput formControlName="minRequiredBalance" />
     </mat-form-field>
 
-    <mat-form-field class="flex-48" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
-      <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
-      <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
-    </mat-form-field>
+    @if (savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

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

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

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

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