Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html

@@ -2,9 +2,11 @@
   <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData" [value]="charge">
-        {{ charge.name }}
-      </mat-option>
+      @for (charge of chargeData; track charge) {
+        <mat-option [value]="charge">
+          {{ charge.name }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -55,38 +57,37 @@
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        <span
-          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
-        >
-          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
-        </span>
-        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
-        </span>
-        <span
-          *ngIf="
-            !(
-              charge.chargeTimeType.value === 'Monthly Fee' ||
-              charge.chargeTimeType.value === 'Annual Fee' ||
-              charge.chargeTimeType.value === 'Specified due date' ||
-              charge.chargeTimeType.value === 'Weekly Fee'
-            )
-          "
-        >
-          {{ 'labels.inputs.N/A' | translate }}
-        </span>
-        <button
-          mat-icon-button
-          color="primary"
-          *ngIf="
-            charge.chargeTimeType.value === 'Weekly Fee' ||
+        @if (charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee') {
+          <span>
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
+          </span>
+        }
+        @if (charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee') {
+          <span>
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
+          </span>
+        }
+        @if (
+          !(
+            charge.chargeTimeType.value === 'Monthly Fee' ||
             charge.chargeTimeType.value === 'Annual Fee' ||
-            charge.chargeTimeType.value === 'Specified due date'
-          "
-          (click)="editChargeDate(charge)"
-        >
-          <fa-icon icon="pen"></fa-icon>
-        </button>
+            charge.chargeTimeType.value === 'Specified due date' ||
+            charge.chargeTimeType.value === 'Weekly Fee'
+          )
+        ) {
+          <span>
+            {{ 'labels.inputs.N/A' | translate }}
+          </span>
+        }
+        @if (
+          charge.chargeTimeType.value === 'Weekly Fee' ||
+          charge.chargeTimeType.value === 'Annual Fee' ||
+          charge.chargeTimeType.value === 'Specified due date'
+        ) {
+          <button mat-icon-button color="primary" (click)="editChargeDate(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        }
       </td>
     </ng-container>
 
@@ -94,14 +95,11 @@
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
-        <button
-          mat-icon-button
-          color="primary"
-          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-          (click)="editChargeFeeInterval(charge)"
-        >
-          <fa-icon icon="pen"></fa-icon>
-        </button>
+        @if (charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee') {
+          <button mat-icon-button color="primary" (click)="editChargeFeeInterval(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        }
       </td>
     </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -61,6 +61,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnChanges {
+  dialog = inject(MatDialog);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
   @Input() currencyCode: UntypedFormControl;
@@ -87,12 +91,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
   /** Currency Code */
   currency: Currency | null = null;
 
-  constructor(
-    public dialog: MatDialog,
-    private dateUtils: Dates,
-    private settingsService: SettingsService
-  ) {}
-
   ngOnInit() {
     this.chargesDataSource = [];
     if (this.recurringDepositsAccountTemplate.id && this.recurringDepositsAccountTemplate.charges) {
@@ -141,7 +139,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'number',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Amount',
@@ -172,7 +169,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'datetime-local',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Date',
@@ -214,7 +210,6 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
         type: 'text',
         required: false
       })
-
     ];
     const data = {
       title: 'Edit Charge Fee Interval',

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
@@ -26,6 +26,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private recurringDepositsService = inject(RecurringDepositsService);
+  private settingsService = inject(SettingsService);
+
   /** Recurring Deposits Account Template */
   @Input() recurringDepositsAccountTemplate: any;
 
@@ -53,11 +57,7 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositsAccountDetailsForm();
   }
 

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

@@ -32,8 +32,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('expandChartSlab', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts

@@ -34,8 +34,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('expandChartSlab', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -22,25 +22,25 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option
-          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id"
-        >
-          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
+          <mat-option [value]="lockinPeriodFrequencyType.id">
+            {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
-    <mifosx-input-amount
-      [currency]="currency"
-      [isRequired]="true"
-      *ngIf="currency"
-      class="flex-48"
-      [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
-      [inputLabel]="'Recurring Deposit Amount'"
-    >
-    </mifosx-input-amount>
+    @if (currency) {
+      <mifosx-input-amount
+        [currency]="currency"
+        [isRequired]="true"
+        class="flex-48"
+        [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
+        [inputLabel]="'Recurring Deposit Amount'"
+      >
+      </mifosx-input-amount>
+    }
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Period' | translate }}</h4>
 
@@ -52,9 +52,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -62,7 +64,7 @@
       {{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}
     </mat-checkbox>
 
-    <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
+    @if (!recurringDepositAccountSettingsForm.value.isCalendarInherited) {
       <mat-form-field class="flex-48" (click)="expectedFirstDepositOnDatePicker.open()">
         <mat-label>{{ 'labels.inputs.Deposit Start Date' | translate }}</mat-label>
         <input
@@ -76,9 +78,7 @@
         <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
       </mat-form-field>
-
       <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Frequency' | translate }}</h4>
-
       <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Deposit Frequency' | translate }}</mat-label>
         <input type="number" matInput formControlName="recurringFrequency" required />
@@ -87,20 +87,21 @@
           <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
       <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
         <mat-select formControlName="recurringFrequencyType" required>
-          <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+            <mat-option [value]="periodFrequencyType.id">
+              {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+            </mat-option>
+          }
         </mat-select>
         <mat-error>
           {{ 'labels.inputs.Deposit Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
           <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-    </ng-container>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
@@ -118,9 +119,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
@@ -138,9 +141,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -154,9 +159,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
-        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (periodFrequencyType of periodFrequencyTypeData; track periodFrequencyType) {
+          <mat-option [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -176,12 +183,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option
-          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
-          [value]="preClosurePenalInterestOnType.id"
-        >
-          {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData; track preClosurePenalInterestOnType) {
+          <mat-option [value]="preClosurePenalInterestOnType.id">
+            {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -192,18 +198,18 @@
       <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
     </mat-form-field>
 
-    <ng-container *ngIf="taxGroup">
+    @if (taxGroup) {
       <h4 class="mat-h4 flex-98">{{ 'labels.heading.Tax Group' | translate }}</h4>
-
       <mat-checkbox labelPosition="before" formControlName="withHoldTax" class="margin-v flex-48">
         {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
       </mat-checkbox>
-
-      <mat-form-field class="flex-48" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
-        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
-        <input type="text" matInput formControlName="taxGroupId" />
-      </mat-form-field>
-    </ng-container>
+      @if (recurringDepositAccountSettingsForm.controls.taxGroupId) {
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
+          <input type="text" matInput formControlName="taxGroupId" />
+        </mat-form-field>
+      }
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -36,6 +36,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountSettingsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   @Input() isNew = true;
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
@@ -60,10 +63,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositAccountSettingsForm();
     this.buildDependencies();
   }

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

@@ -3,12 +3,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option
-          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
-          [value]="interestCompoundingPeriodType.id"
-        >
-          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCompoundingPeriodType of interestCompoundingPeriodTypeData; track interestCompoundingPeriodType) {
+          <mat-option [value]="interestCompoundingPeriodType.id">
+            {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -19,12 +18,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option
-          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
-          [value]="interestPostingPeriodType.id"
-        >
-          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestPostingPeriodType of interestPostingPeriodTypeData; track interestPostingPeriodType) {
+          <mat-option [value]="interestPostingPeriodType.id">
+            {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
@@ -35,12 +33,11 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option
-          *ngFor="let interestCalculationType of interestCalculationTypeData"
-          [value]="interestCalculationType.id"
-        >
-          {{ interestCalculationType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (interestCalculationType of interestCalculationTypeData; track interestCalculationType) {
+          <mat-option [value]="interestCalculationType.id">
+            {{ interestCalculationType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
@@ -51,12 +48,14 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option
-          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
-          [value]="interestCalculationDaysInYearType.id"
-        >
-          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (
+          interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData;
+          track interestCalculationDaysInYearType
+        ) {
+          <mat-option [value]="interestCalculationDaysInYearType.id">
+            {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
       <mat-error>
         {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
@@ -21,6 +21,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class RecurringDepositsAccountTermsStepComponent implements OnInit, OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
 
@@ -43,10 +46,7 @@ export class RecurringDepositsAccountTermsStepComponent implements OnInit, OnCha
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.createRecurringDepositsAccountTermsForm();
   }