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.

.browserslistrc

@@ -6,7 +6,17 @@ last 2 versions
 > 0.5%
 Firefox ESR
 not dead
+not and_qq 14.9
+not and_uc 15.5
+not android 142
 not kaios 2.5
+not kaios 3.0-3.1
 not op_mini all
+not op_mob 80
+not opera 122
+not opera 121
+not samsung 28
+not samsung 29
+not samsung 27
 # For IE 9-11 support, please uncomment the next line and adjust as needed
 # IE 9-11

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
           # no support for lts as of now with github actions.
           # issue link : https://github.com/actions/setup-node/issues/26
           # lts/gallium node v19.7.0 (npm v9.5.0)
-          node-version: '22.9.0'
+          node-version: '22.12.0'
 
       - name: Remove node_modules
         run: rm -rf node_modules

.htmlhintrc

@@ -3,7 +3,7 @@
   "attr-lowercase": false,
   "attr-value-double-quotes": true,
   "tag-pair": true,
-  "spec-char-escape": true,
+  "spec-char-escape": false,
   "id-unique": true,
   "src-not-empty": true,
   "attr-no-duplication": true,

angular.json

@@ -231,6 +231,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

eslint.config.js

@@ -7,7 +7,10 @@ const tsParser = require('@typescript-eslint/parser');
 
 module.exports = [
   {
-    ignores: ['projects/**/*']
+    ignores: [
+      'projects/**/*',
+      'dist/**/*'
+    ]
   },
 
   // TS files configuration

package.json

@@ -31,26 +31,25 @@
     "cypress:run": "cypress run"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "19.2.15",
+    "@angular/animations": "20.3.15",
-    "@angular/animations": "19.2.14",
+    "@angular/cdk": "^20.2.14",
-    "@angular/cdk": "^19.2.18",
+    "@angular/common": "20.3.15",
-    "@angular/common": "19.2.14",
+    "@angular/compiler": "20.3.15",
-    "@angular/compiler": "19.2.14",
+    "@angular/core": "20.3.15",
-    "@angular/core": "19.2.14",
+    "@angular/forms": "20.3.15",
-    "@angular/forms": "19.2.14",
+    "@angular/localize": "20.3.15",
-    "@angular/localize": "19.2.14",
+    "@angular/material": "^20.2.14",
-    "@angular/material": "^19.2.18",
+    "@angular/platform-browser": "20.3.15",
-    "@angular/platform-browser": "19.2.14",
+    "@angular/platform-browser-dynamic": "20.3.15",
-    "@angular/platform-browser-dynamic": "19.2.14",
+    "@angular/router": "20.3.15",
-    "@angular/router": "19.2.14",
+    "@fortawesome/angular-fontawesome": "^3.0.0",
-    "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
-    "@swimlane/ngx-graph": "^10.0.0",
+    "@swimlane/ngx-graph": "^11.0.0",
     "@tailwindcss/forms": "^0.5.4",
     "@tinymce/tinymce-angular": "^9.1.1",
     "chart.js": "^4.5.1",
@@ -62,24 +61,24 @@
     "lightgallery": "^2.9.0",
     "lodash": "4.17.21",
     "moment": "^2.29.4",
-    "ngx-mat-select-search": "^7.0.10",
+    "ngx-mat-select-search": "^8.0.2",
-    "rxjs": "7.8.1",
+    "rxjs": "^7.8.2",
     "tinymce": "^8.2.2",
-    "tslib": "^2.0.0",
+    "tslib": "^2.8.1",
     "vkbeautify": "^0.99.3",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^19.0.1",
+    "@angular-builders/jest": "^20.0.0",
-    "@angular-eslint/builder": "^19.7.0",
+    "@angular-eslint/builder": "^20.7.0",
-    "@angular-eslint/eslint-plugin": "^19.7.0",
+    "@angular-eslint/eslint-plugin": "^20.7.0",
-    "@angular-eslint/eslint-plugin-template": "^19.7.0",
+    "@angular-eslint/eslint-plugin-template": "^20.7.0",
-    "@angular-eslint/schematics": "^19.7.0",
+    "@angular-eslint/schematics": "^20.7.0",
-    "@angular-eslint/template-parser": "^19.7.0",
+    "@angular-eslint/template-parser": "^20.7.0",
-    "@angular/build": "^19.2.15",
+    "@angular/build": "^20.3.13",
-    "@angular/cli": "19.2.15",
+    "@angular/cli": "20.3.13",
-    "@angular/compiler-cli": "19.2.14",
+    "@angular/compiler-cli": "20.3.15",
-    "@angular/language-service": "19.2.14",
+    "@angular/language-service": "20.3.15",
     "@cypress/schematic": "^2.5.2",
     "@types/d3-dispatch": "^3.0.1",
     "@types/d3-drag": "^3.0.1",
@@ -91,11 +90,11 @@
     "@types/lodash": "4.14.132",
     "@types/node": "22.15.29",
     "@types/vkbeautify": "^0.99.2",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@typescript-eslint/parser": "^8.48.1",
     "@vendure/ngx-translate-extract": "^9.4.0",
     "cypress": "^13.17.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.39.1",
     "git-describe": "^4.1.1",
     "htmlhint": "1.1.4",
     "https-proxy-agent": "7.0.2",
@@ -103,10 +102,10 @@
     "jasmine-core": "^4.2.0",
     "jasmine-spec-reporter": "~5.0.0",
     "jest": "^29.7.0",
-    "jest-preset-angular": "^14.6.0",
+    "jest-preset-angular": "^14.6.2",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.2",
-    "prettier-plugin-multiline-arrays": "^3.0.6",
+    "prettier-plugin-multiline-arrays": "^4.0.5",
     "puppeteer": "^24.4.0",
     "stylelint": "^16.10.0",
     "stylelint-config-recommended-scss": "^14.1.0",
@@ -114,7 +113,7 @@
     "stylelint-scss": "^6.8.1",
     "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.9.3"
   },
   "repository": {
     "type": "git",
@@ -124,7 +123,7 @@
     "url": "https://mifosforge.jira.com/jira/software/c/projects/WEB/boards/62"
   },
   "engines": {
-    "node": ">= 16.15.1",
+    "node": ">= 20.19.0",
     "npm": ">= 8.11.0"
   },
   "lint-staged": {

src/app/account-transfers/account-transfers.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -16,7 +16,7 @@ import { switchMap } from 'rxjs/operators';
   providedIn: 'root'
 })
 export class AccountTransfersService {
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @params standingInstructionsId

src/app/account-transfers/common-resolvers/list-transactions.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -14,14 +14,8 @@ import { SettingsService } from 'app/settings/settings.service';
  */
 @Injectable()
 export class ListTransactionsResolver {
-  /**
+  private accountTransfersService = inject(AccountTransfersService);
-   * @param {AccountTransfersService} accountTransfersService Account Transfers service.
+  private settingsService = inject(SettingsService);
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService
-  ) {}
 
   /**
    * Returns the Standing Instructions Data.

src/app/account-transfers/common-resolvers/make-account-transfer-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,12 +13,10 @@ import { AccountTransfersService } from '../account-transfers.service';
  */
 @Injectable()
 export class MakeAccountTransferTemplateResolver {
+  private accountTransfersService = inject(AccountTransfersService);
+
   accountTypeId: string;
   id: any;
-  /**
-   * @param {accountTransfersService} AccountTransfersService Account Transfers service.
-   */
-  constructor(private accountTransfersService: AccountTransfersService) {}
 
   /**
    * Returns the Standing Instructions Data.

src/app/account-transfers/common-resolvers/standing-instructions-data-and-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountTransfersService } from '../account-transfers.service';
  */
 @Injectable()
 export class StandingInstructionsDataAndTemplateResolver {
-  /**
+  private accountTransfersService = inject(AccountTransfersService);
-   * @param {accountTransfersService} AccountTransfersService Account Transfers service.
-   */
-  constructor(private accountTransfersService: AccountTransfersService) {}
 
   /**
    * Returns the Standing Instructions Data.

src/app/account-transfers/common-resolvers/standing-instructions-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,12 +13,9 @@ import { AccountTransfersService } from '../account-transfers.service';
  */
 @Injectable()
 export class StandingInstructionsTemplateResolver {
-  accountTypeId: string;
+  private accountTransfersService = inject(AccountTransfersService);
 
-  /**
+  accountTypeId: string;
-   * @param {accountTransfersService} AccountTransfersService Account Transfers service.
-   */
-  constructor(private accountTransfersService: AccountTransfersService) {}
 
   /**
    * Returns the Standing Instructions Data.

src/app/account-transfers/common-resolvers/view-account-transfer.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountTransfersService } from '../account-transfers.service';
  */
 @Injectable()
 export class ViewAccountTransferResolver {
-  /**
+  private accountTransfersService = inject(AccountTransfersService);
-   * @param {AccountTransfersService} AccountTransfersService Savings service.
-   */
-  constructor(private accountTransfersService: AccountTransfersService) {}
 
   /**
    * Returns the View Account Transfer data.

src/app/account-transfers/common-resolvers/view-standing-instructions.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountTransfersService } from '../account-transfers.service';
  */
 @Injectable()
 export class ViewStandingInstructionsResolver {
-  /**
+  private accountTransfersService = inject(AccountTransfersService);
-   * @param {accountTransfersService} AccountTransfersService Account Transfers service.
-   */
-  constructor(private accountTransfersService: AccountTransfersService) {}
 
   /**
    * Returns the Standing Instructions Data.

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html

@@ -6,10 +6,12 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="createStandingInstructionsForm.controls.name.hasError('required')">
+            @if (createStandingInstructionsForm.controls.name.hasError('required')) {
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.inputs.required' | translate }}</strong>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.inputs.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
@@ -20,153 +22,199 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="transferType" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let transferType of transferTypeData" [value]="transferType.id">
+              @for (transferType of transferTypeData; track transferType) {
-                {{ transferType.value }}
+                <mat-option [value]="transferType.id">
-              </mat-option>
+                  {{ transferType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.transferType.hasError('required')">
+            @if (createStandingInstructionsForm.controls.transferType.hasError('required')) {
-              {{ 'labels.inputs.Transfer Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.inputs.required' | translate }}</strong>
+                {{ 'labels.inputs.Transfer Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.inputs.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
-              <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
+              @for (priorityType of priorityTypeData; track priorityType) {
-                {{ priorityType.value }}
+                <mat-option [value]="priorityType.id">
-              </mat-option>
+                  {{ priorityType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.priority.hasError('required')">
+            @if (createStandingInstructionsForm.controls.priority.hasError('required')) {
-              {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
-              <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
+              @for (statusType of statusTypeData; track statusType) {
-                {{ statusType.value }}
+                <mat-option [value]="statusType.id">
-              </mat-option>
+                  {{ statusType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.status.hasError('required')">
+            @if (createStandingInstructionsForm.controls.status.hasError('required')) {
-              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountType" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let fromAccountType of fromAccountTypeData" [value]="fromAccountType.id">
+              @for (fromAccountType of fromAccountTypeData; track fromAccountType) {
-                {{ fromAccountType.value }}
+                <mat-option [value]="fromAccountType.id">
-              </mat-option>
+                  {{ fromAccountType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountType.hasError('required')">
+            @if (createStandingInstructionsForm.controls.fromAccountType.hasError('required')) {
-              {{ 'labels.inputs.From Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.From Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let fromAccount of fromAccountData" [value]="fromAccount.id">
+              @for (fromAccount of fromAccountData; track fromAccount) {
-                {{ fromAccount.productName }} - {{ fromAccount.accountNo }}
+                <mat-option [value]="fromAccount.id">
-              </mat-option>
+                  {{ fromAccount.productName }} - {{ fromAccount.accountNo }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountId.hasError('required')">
+            @if (createStandingInstructionsForm.controls.fromAccountId.hasError('required')) {
-              {{ 'labels.inputs.From Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.From Account' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
             <mat-select required formControlName="destination">
-              <mat-option *ngFor="let destinationType of destinationTypeData" [value]="destinationType.id">
+              @for (destinationType of destinationTypeData; track destinationType) {
-                {{ destinationType.value }}
+                <mat-option [value]="destinationType.id">
-              </mat-option>
+                  {{ destinationType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.destination.hasError('required')">
+            @if (createStandingInstructionsForm.controls.destination.hasError('required')) {
-              {{ 'labels.inputs.Destination' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Destination' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
             <mat-select [disabled]="ToOfficeId" required formControlName="toOfficeId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
+              @for (toOfficeType of toOfficeTypeData; track toOfficeType) {
-                {{ toOfficeType.name }}
+                <mat-option [value]="toOfficeType.id">
-              </mat-option>
+                  {{ toOfficeType.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.toOfficeId.hasError('required')">
+            @if (createStandingInstructionsForm.controls.toOfficeId.hasError('required')) {
-              {{ 'labels.inputs.To Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.To Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
             <mat-select [disabled]="ToClientId" required formControlName="toClientId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toClientType of toClientTypeData" [value]="toClientType.id">
+              @for (toClientType of toClientTypeData; track toClientType) {
-                {{ toClientType.displayName }}
+                <mat-option [value]="toClientType.id">
-              </mat-option>
+                  {{ toClientType.displayName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.toClientId.hasError('required')">
+            @if (createStandingInstructionsForm.controls.toClientId.hasError('required')) {
-              {{ 'labels.inputs.Beneficiary' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Beneficiary' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
+              @for (toAccountType of toAccountTypeData; track toAccountType) {
-                {{ toAccountType.value }}
+                <mat-option [value]="toAccountType.id">
-              </mat-option>
+                  {{ toAccountType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountType.hasError('required')">
+            @if (createStandingInstructionsForm.controls.toAccountType.hasError('required')) {
-              {{ 'labels.inputs.To Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.To Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
+              @for (toAccount of toAccountData; track toAccount) {
-                {{ toAccount.productName }} - {{ toAccount.accountNo }}
+                <mat-option [value]="toAccount.id">
-              </mat-option>
+                  {{ toAccount.productName }} - {{ toAccount.accountNo }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountId.hasError('required')">
+            @if (createStandingInstructionsForm.controls.toAccountId.hasError('required')) {
-              {{ 'labels.inputs.To Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.To Account' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
-              <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
+              @for (instructionsType of instructionTypeData; track instructionsType) {
-                {{ instructionsType.value }}
+                <mat-option [value]="instructionsType.id">
-              </mat-option>
+                  {{ instructionsType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.instructionType.hasError('required')">
+            @if (createStandingInstructionsForm.controls.instructionType.hasError('required')) {
-              {{ 'labels.inputs.Standing Instruction Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Standing Instruction Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" matInput required formControlName="amount" />
-            <mat-error *ngIf="createStandingInstructionsForm.controls.amount.hasError('required')">
+            @if (createStandingInstructionsForm.controls.amount.hasError('required')) {
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48" (click)="validFromDatePicker.open()">
@@ -181,10 +229,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.validFrom.hasError('required')">
+            @if (createStandingInstructionsForm.controls.validFrom.hasError('required')) {
-              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48" (click)="validTillDatePicker.open()">
@@ -199,48 +249,57 @@
             />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.validTill.hasError('required')">
+            @if (createStandingInstructionsForm.controls.validTill.hasError('required')) {
-              {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
-              <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
+              @for (recurrenceType of recurrenceTypeData; track recurrenceType) {
-                {{ recurrenceType.value }}
+                <mat-option [value]="recurrenceType.id">
-              </mat-option>
+                  {{ recurrenceType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceType.hasError('required')">
+            @if (createStandingInstructionsForm.controls.recurrenceType.hasError('required')) {
-              {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
             <input type="number" matInput required formControlName="recurrenceInterval" />
-            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
+            @if (createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')) {
-              {{ 'labels.inputs.Recurrence Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Recurrence Interval' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceFrequency">
-              <mat-option
+              @for (recurrenceFrequencyType of recurrenceFrequencyTypeData; track recurrenceFrequencyType) {
-                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                <mat-option [value]="recurrenceFrequencyType.id">
-                [value]="recurrenceFrequencyType.id"
+                  {{ recurrenceFrequencyType.value }}
-              >
+                </mat-option>
-                {{ recurrenceFrequencyType.value }}
+              }
-              </mat-option>
             </mat-select>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')">
+            @if (createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')) {
-              {{ 'labels.inputs.Recurrence Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Recurrence Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48" (click)="recurrenceOnMonthDayDatePicker.open()">
@@ -255,10 +314,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
-            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')">
+            @if (createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')) {
-              {{ 'labels.inputs.On Month Day' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.On Month Day' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateStandingInstructionsComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
   /** Standing Instructions Data */
   standingIntructionsTemplate: any;
   /** Minimum date allowed. */
@@ -79,14 +86,7 @@ export class CreateStandingInstructionsComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {Dates} dateUtils Date Utils
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates
-  ) {
     this.route.data.subscribe((data: { standingIntructionsTemplate: any }) => {
       this.standingIntructionsTemplate = data.standingIntructionsTemplate;
       this.setParams();

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html

@@ -26,27 +26,35 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
-              <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
+              @for (priorityType of priorityTypeData; track priorityType) {
-                {{ priorityType.value }}
+                <mat-option [value]="priorityType.id">
-              </mat-option>
+                  {{ priorityType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="editStandingInstructionsForm.controls.priority.hasError('required')">
+            @if (editStandingInstructionsForm.controls.priority.hasError('required')) {
-              {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
-              <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
+              @for (statusType of statusTypeData; track statusType) {
-                {{ statusType.value }}
+                <mat-option [value]="statusType.id">
-              </mat-option>
+                  {{ statusType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="editStandingInstructionsForm.controls.status.hasError('required')">
+            @if (editStandingInstructionsForm.controls.status.hasError('required')) {
-              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
@@ -82,9 +90,11 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
-              <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
+              @for (instructionsType of instructionTypeData; track instructionsType) {
-                {{ instructionsType.value }}
+                <mat-option [value]="instructionsType.id">
-              </mat-option>
+                  {{ instructionsType.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -105,10 +115,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
-            <mat-error *ngIf="editStandingInstructionsForm.controls.validFrom.hasError('required')">
+            @if (editStandingInstructionsForm.controls.validFrom.hasError('required')) {
-              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48" (click)="validTillDatePicker.open()">
@@ -123,23 +135,29 @@
             />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
-            <mat-error *ngIf="editStandingInstructionsForm.controls.validTill.hasError('required')">
+            @if (editStandingInstructionsForm.controls.validTill.hasError('required')) {
-              {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
-              <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
+              @for (recurrenceType of recurrenceTypeData; track recurrenceType) {
-                {{ recurrenceType.value }}
+                <mat-option [value]="recurrenceType.id">
-              </mat-option>
+                  {{ recurrenceType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="editStandingInstructionsForm.controls.recurrenceType.hasError('required')">
+            @if (editStandingInstructionsForm.controls.recurrenceType.hasError('required')) {
-              {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
@@ -150,12 +168,11 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select formControlName="recurrenceFrequency">
-              <mat-option
+              @for (recurrenceFrequencyType of recurrenceFrequencyTypeData; track recurrenceFrequencyType) {
-                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                <mat-option [value]="recurrenceFrequencyType.id">
-                [value]="recurrenceFrequencyType.id"
+                  {{ recurrenceFrequencyType.value }}
-              >
+                </mat-option>
-                {{ recurrenceFrequencyType.value }}
+              }
-              </mat-option>
             </mat-select>
           </mat-form-field>
 

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditStandingInstructionsComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
   /** Standing Instructions Data */
   standingInstructionsData: any;
   /** Standing Instructions Id */
@@ -53,14 +60,7 @@ export class EditStandingInstructionsComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {Dates} dateUtils Date Utils
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates
-  ) {
     this.route.data.subscribe((data: { standingInstructionsDataAndTemplate: any }) => {
       this.standingInstructionsData = data.standingInstructionsDataAndTemplate;
       this.standingInstructionsId = data.standingInstructionsDataAndTemplate.id;

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html

@@ -2,32 +2,38 @@
 
 <mat-card class="container">
   <div class="layout-row-wrap gap-2px responsive-column">
-    <div class="flex-fill" *ngIf="isFromClient">
+    @if (isFromClient) {
-      <span class="flex-40">
+      <div class="flex-fill">
-        <h3 class="mat-h3">{{ 'labels.heading.Client Type' | translate }}</h3>
+        <span class="flex-40">
-      </span>
+          <h3 class="mat-h3">{{ 'labels.heading.Client Type' | translate }}</h3>
-      <span class="client-Name">
+        </span>
-        <h3 class="mat-h3">{{ clientName }}</h3>
+        <span class="client-Name">
-      </span>
+          <h3 class="mat-h3">{{ clientName }}</h3>
-    </div>
+        </span>
+      </div>
+    }
 
-    <div *ngIf="!isFromClient" class="flex-fill">
+    @if (!isFromClient) {
-      <mat-form-field class="flex-30">
+      <div class="flex-fill">
-        <input matInput placeholder="ClientName" [formControl]="clientNameControl" />
+        <mat-form-field class="flex-30">
-      </mat-form-field>
+          <input matInput placeholder="ClientName" [formControl]="clientNameControl" />
-      <mat-form-field class="flex-30">
+        </mat-form-field>
-        <input matInput placeholder="From Client Id" [formControl]="fromClientId" />
+        <mat-form-field class="flex-30">
-      </mat-form-field>
+          <input matInput placeholder="From Client Id" [formControl]="fromClientId" />
-    </div>
+        </mat-form-field>
+      </div>
+    }
 
     <mat-divider [inset]="true"></mat-divider>
 
     <mat-form-field class="type-field">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select [formControl]="transferType">
-        <mat-option *ngFor="let transferTypeData of transferTypeDatas" [value]="transferTypeData.id">
+        @for (transferTypeData of transferTypeDatas; track transferTypeData) {
-          {{ transferTypeData.value }}
+          <mat-option [value]="transferTypeData.id">
-        </mat-option>
+            {{ transferTypeData.value }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -88,30 +94,34 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let instruction">
-        <span *ngIf="instruction.status.value !== 'Deleted'">
+        @if (instruction.status.value !== 'Deleted') {
-          <button
+          <span>
-            class="account-action-button"
+            <button
-            mat-raised-button
+              class="account-action-button"
-            color="primary"
+              mat-raised-button
-            matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              color="primary"
-            *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-            [routerLink]="['../', instruction.id, 'edit']"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-          >
+              [routerLink]="['../', instruction.id, 'edit']"
-            <i class="fa fa-edit"></i>
+            >
-          </button>
+              <i class="fa fa-edit"></i>
-        </span>
+            </button>
-        <span *ngIf="instruction.status.value !== 'Deleted'">
+          </span>
-          <button
+        }
-            class="account-action-button"
+        @if (instruction.status.value !== 'Deleted') {
-            mat-raised-button
+          <span>
-            color="warn"
+            <button
-            matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              class="account-action-button"
-            *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              mat-raised-button
-            (click)="deleteStandingInstruction(instruction.id)"
+              color="warn"
-          >
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-            <i class="fa fa-times"></i>
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
-          </button>
+              (click)="deleteStandingInstruction(instruction.id)"
-        </span>
+            >
+              <i class="fa fa-times"></i>
+            </button>
+          </span>
+        }
         <button
           class="account-action-button"
           mat-raised-button

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import {
@@ -55,6 +55,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ListStandingInstructionsComponent {
+  private route = inject(ActivatedRoute);
+  private accountTransfersService = inject(AccountTransfersService);
+  private settingsService = inject(SettingsService);
+  private dialog = inject(MatDialog);
+
   /** Recurring Deposits Data */
   standingIntructionsTemplateData: any;
   /** Instructions Data */
@@ -104,12 +109,7 @@ export class ListStandingInstructionsComponent {
    * @param {SettingsService} settingsService Settings Service
    * @param {AccountTransfersService} accountTransfersService Account Transfers Service
    */
-  constructor(
+  constructor() {
-    private route: ActivatedRoute,
-    private accountTransfersService: AccountTransfersService,
-    private settingsService: SettingsService,
-    private dialog: MatDialog
-  ) {
     this.route.data.subscribe((data: { standingIntructionsTemplate: any }) => {
       this.standingIntructionsTemplateData = data.standingIntructionsTemplate;
       if (data.standingIntructionsTemplate.fromClient) {

src/app/account-transfers/list-transactions/list-transactions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 
 import { MatPaginator } from '@angular/material/paginator';
 import {
@@ -46,6 +46,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ListTransactionsComponent {
+  private route = inject(ActivatedRoute);
+
   /** List Transactions Data */
   listTransactionData: any;
   /** Data source for instructions table. */
@@ -65,7 +67,7 @@ export class ListTransactionsComponent {
    * Retrieves Recurring Deposits Account Data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { listTransactionData: any }) => {
       this.listTransactionData = data.listTransactionData;
       this.dataSource = new MatTableDataSource(this.listTransactionData.transactions.pageItems);

src/app/account-transfers/make-account-interbank-transfers/make-account-interbank-transfers.component.html

@@ -12,10 +12,12 @@
       />
       <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #transferDatePicker></mat-datepicker>
-      <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
+      @if (makeAccountTransferForm.controls.transferDate.hasError('required')) {
-        {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <mat-error>
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-      </mat-error>
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-98">
@@ -41,23 +43,29 @@
     <mat-form-field class="flex-98 error-warn">
       <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
       <input #amntInput type="number" matInput required formControlName="transferAmount" />
-      <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
+      @if (makeAccountTransferForm.controls.transferAmount.hasError('required')) {
-        {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+        <mat-error>
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-      </mat-error>
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
-      <mat-error *ngIf="makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')">
+        </mat-error>
-        <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
+      }
-        {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
+      @if (makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')) {
-      </mat-error>
+        <mat-error>
+          <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
+          {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
       <textarea matInput formControlName="transferDescription" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-      <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
+      @if (makeAccountTransferForm.controls.transferDescription.hasError('required')) {
-        {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
+        <mat-error>
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
-      </mat-error>
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
   </div>
 </form>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -1,343 +1,364 @@
 <div class="container">
-  <div *ngIf="isLoading" class="loader-wrapper">
+  @if (isLoading) {
-    <div class="bottom triangle"></div>
+    <div class="loader-wrapper">
-    <div class="top triangle"></div>
+      <div class="bottom triangle"></div>
-    <div class="left triangle"></div>
+      <div class="top triangle"></div>
-    <div class="right triangle"></div>
+      <div class="left triangle"></div>
-  </div>
+      <div class="right triangle"></div>
+    </div>
+  }
 
-  <mat-card *ngIf="!isLoading" class="transfer-card">
+  @if (!isLoading) {
-    <mat-card-content>
+    <mat-card class="transfer-card">
-      <!-- Source Account Details Section -->
+      <mat-card-content>
-      <div class="section-container">
+        <!-- Source Account Details Section -->
-        <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
+        <div class="section-container">
-
+          <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
-        <mat-divider></mat-divider>
+          <mat-divider></mat-divider>
-
+          <div class="info-grid">
-        <div class="info-grid">
+            <div class="info-row">
-          <div class="info-row">
+              <div class="info-label">{{ 'labels.inputs.Applicant' | translate }}</div>
-            <div class="info-label">{{ 'labels.inputs.Applicant' | translate }}</div>
+              <div class="info-value">{{ accountTransferTemplateData.fromClient.displayName }}</div>
-            <div class="info-value">{{ accountTransferTemplateData.fromClient.displayName }}</div>
+            </div>
-          </div>
+            <div class="info-row">
-
+              <div class="info-label">{{ 'labels.inputs.Office' | translate }}</div>
-          <div class="info-row">
+              <div class="info-value">{{ accountTransferTemplateData.fromOffice.name }}</div>
-            <div class="info-label">{{ 'labels.inputs.Office' | translate }}</div>
+            </div>
-            <div class="info-value">{{ accountTransferTemplateData.fromOffice.name }}</div>
+            <div class="info-row">
-          </div>
+              <div class="info-label">{{ 'labels.inputs.From Account' | translate }}</div>
-
+              <div class="info-value">
-          <div class="info-row">
+                {{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
-            <div class="info-label">{{ 'labels.inputs.From Account' | translate }}</div>
+                  accountTransferTemplateData.fromAccount.accountNo
-            <div class="info-value">
+                }}
-              {{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
+              </div>
-                accountTransferTemplateData.fromAccount.accountNo
+            </div>
-              }}
+            <div class="info-row">
+              <div class="info-label">{{ 'labels.inputs.From Account Type' | translate }}</div>
+              <div class="info-value">{{ accountTransferTemplateData.fromAccountType.value }}</div>
+            </div>
+            <div class="info-row">
+              <div class="info-label">{{ 'labels.inputs.Currency' | translate }}</div>
+              <div class="info-value">{{ accountTransferTemplateData.currency.name }}</div>
             </div>
           </div>
-
-          <div class="info-row">
-            <div class="info-label">{{ 'labels.inputs.From Account Type' | translate }}</div>
-            <div class="info-value">{{ accountTransferTemplateData.fromAccountType.value }}</div>
-          </div>
-
-          <div class="info-row">
-            <div class="info-label">{{ 'labels.inputs.Currency' | translate }}</div>
-            <div class="info-value">{{ accountTransferTemplateData.currency.name }}</div>
-          </div>
         </div>
-      </div>
+        <!-- Interbank Section -->
-
+        @if (interbank) {
-      <!-- Interbank Section -->
+          <div class="section-container">
-      <div *ngIf="interbank" class="section-container">
+            <div class="interbank-section">
-        <div class="interbank-section">
+              <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' | translate }}</h3>
-          <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' | translate }}</h3>
+              <mat-form-field class="full-width">
-          <mat-form-field class="full-width">
+                <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
-            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+                <input
-            <input
+                  matInput
-              matInput
+                  [readonly]="interbankTransferForm"
-              [readonly]="interbankTransferForm"
+                  type="tel"
-              type="tel"
+                  #input
-              #input
+                  [(ngModel)]="phoneAccount"
-              [(ngModel)]="phoneAccount"
+                  maxlength="10"
-              maxlength="10"
+                  required
-              required
+                  placeholder="Enter phone number"
-              placeholder="Enter phone number"
+                  title="Phone number"
-              title="Phone number"
+                />
-            />
+                <mat-hint align="end">{{ phoneAccount.length || 0 }}/10</mat-hint>
-            <mat-hint align="end">{{ phoneAccount.length || 0 }}/10</mat-hint>
+              </mat-form-field>
-          </mat-form-field>
+            </div>
-        </div>
+            <!--interbank -->
-
+            @if (!interbankTransferForm) {
-        <!--interbank -->
+              <mat-card-actions class="action-buttons">
-        <mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
+                <ng-container *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'">
+                  <button
+                    mat-raised-button
+                    color="primary"
+                    [disabled]="phoneAccount.length !== 10"
+                    (click)="searchAccountByNumber()"
+                    id="search-button"
+                    class="primary-button"
+                  >
+                    {{ 'labels.buttons.Search' | translate }}
+                  </button>
+                </ng-container>
+              </mat-card-actions>
+            }
+          </div>
+        }
+        @if (!interbank) {
+          <mat-divider></mat-divider>
+        }
+        <!-- Transfer Form Section (Normal) -->
+        @if (!interbank && makeAccountTransferForm) {
+          <form [formGroup]="makeAccountTransferForm" class="transfer-form">
+            <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
+            <div class="form-grid">
+              <mat-form-field class="form-field" (click)="transferDatePicker.open()">
+                <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="transferDatePicker"
+                  required
+                  formControlName="transferDate"
+                  placeholder="Select date"
+                  title="Transaction Date"
+                />
+                <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
+                <mat-datepicker #transferDatePicker></mat-datepicker>
+                @if (makeAccountTransferForm.controls.transferDate.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-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+                <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
+                  @for (toOfficeType of toOfficeTypeData; track toOfficeType) {
+                    <mat-option [value]="toOfficeType.id">
+                      {{ toOfficeType.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+                @if (makeAccountTransferForm.controls.toOfficeId.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
+                <input
+                  matInput
+                  formControlName="toClientId"
+                  [matAutocomplete]="clientsAutocomplete"
+                  placeholder="Select or type client name"
+                  title="Client name"
+                />
+                @if (makeAccountTransferForm.controls.toClientId.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-autocomplete
+                autoActiveFirstOption
+                #clientsAutocomplete="matAutocomplete"
+                [displayWith]="displayClient"
+              >
+                @for (client of clientsData; track client) {
+                  <mat-option [value]="client"> {{ client.id }} - {{ client.displayName }} </mat-option>
+                }
+              </mat-autocomplete>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
+                <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
+                  @for (toAccountType of toAccountTypeData; track toAccountType) {
+                    <mat-option [value]="toAccountType.id">
+                      {{ toAccountType.value }}
+                    </mat-option>
+                  }
+                </mat-select>
+                @if (makeAccountTransferForm.controls.toAccountType.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
+                <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
+                  @for (toAccount of toAccountData; track toAccount) {
+                    <mat-option [value]="toAccount.id">
+                      {{ toAccount.productName }} - {{ toAccount.accountNo }}
+                    </mat-option>
+                  }
+                </mat-select>
+                @if (makeAccountTransferForm.controls.toAccountId.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+                <input
+                  type="number"
+                  matInput
+                  required
+                  formControlName="transferAmount"
+                  placeholder="Enter amount"
+                  title="Transfer amount"
+                  min="0.01"
+                  step="0.01"
+                />
+                @if (makeAccountTransferForm.controls.transferAmount.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+                @if (makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')) {
+                  <mat-error>
+                    <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
+                    {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="form-field description-field">
+                <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+                <textarea
+                  matInput
+                  formControlName="transferDescription"
+                  cdkTextareaAutosize
+                  cdkAutosizeMinRows="2"
+                  placeholder="Enter transfer description"
+                  title="Transfer description"
+                ></textarea>
+                @if (makeAccountTransferForm.controls.transferDescription.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+            </div>
+          </form>
+        }
+        <!-- Interbank Transfer Form Section -->
+        @if (interbank && interbankTransferForm && makeAccountTransferForm) {
+          <form [formGroup]="makeAccountTransferForm" class="transfer-form">
+            <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
+            <div class="form-grid">
+              <mat-form-field class="form-field" (click)="transferDatePicker.open()">
+                <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="transferDatePicker"
+                  required
+                  formControlName="transferDate"
+                  placeholder="Select date"
+                  title="Transaction Date"
+                />
+                <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
+                <mat-datepicker #transferDatePicker></mat-datepicker>
+                @if (makeAccountTransferForm.controls.transferDate.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-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+                <input matInput formControlName="toBank" [readonly]="true" placeholder="Bank" title="Bank" />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
+                <input matInput formControlName="toClientId" [readonly]="true" placeholder="Client" title="Client" />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
+                <input
+                  matInput
+                  formControlName="toAccountType"
+                  [readonly]="true"
+                  placeholder="Account Type"
+                  title="Account Type"
+                />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
+                <input matInput formControlName="toAccountId" [readonly]="true" placeholder="Account" title="Account" />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+                <input
+                  type="number"
+                  matInput
+                  required
+                  formControlName="transferAmount"
+                  placeholder="Enter amount"
+                  title="Transfer amount"
+                  min="0.01"
+                  step="0.01"
+                />
+                @if (makeAccountTransferForm.controls.transferAmount.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+                @if (makeAccountTransferForm.controls.transferAmount.hasError('min')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.mustBeAtLeast' | translate }} 0.01
+                  </mat-error>
+                }
+                @if (makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')) {
+                  <mat-error>
+                    <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
+                    {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="form-field description-field">
+                <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+                <textarea
+                  matInput
+                  formControlName="transferDescription"
+                  cdkTextareaAutosize
+                  cdkAutosizeMinRows="2"
+                  placeholder="Enter transfer description"
+                  title="Transfer description"
+                ></textarea>
+                @if (makeAccountTransferForm.controls.transferDescription.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+            </div>
+          </form>
+        }
+      </mat-card-content>
+      @if (!isLoading && makeAccountTransferForm) {
+        <mat-card-actions class="action-buttons">
+          <button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
           <ng-container *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'">
-            <button
+            @if (interbank && interbankTransferForm) {
-              mat-raised-button
+              <button
-              color="primary"
+                mat-raised-button
-              [disabled]="phoneAccount.length !== 10"
+                color="primary"
-              (click)="searchAccountByNumber()"
+                [disabled]="!makeAccountTransferForm.valid"
-              id="search-button"
+                (click)="submit()"
-              class="primary-button"
+                class="primary-button"
-            >
+              >
-              {{ 'labels.buttons.Search' | translate }}
+                {{ 'labels.buttons.Submit' | translate }}
-            </button>
+              </button>
+            }
+            @if (!interbank) {
+              <button
+                mat-raised-button
+                color="primary"
+                [disabled]="!makeAccountTransferForm.valid"
+                (click)="submit()"
+                class="primary-button"
+              >
+                {{ 'labels.buttons.Submit' | translate }}
+              </button>
+            }
           </ng-container>
         </mat-card-actions>
-      </div>
+      }
-
+    </mat-card>
-      <mat-divider *ngIf="!interbank"></mat-divider>
+  }
-
-      <!-- Transfer Form Section (Normal) -->
-      <form *ngIf="!interbank && makeAccountTransferForm" [formGroup]="makeAccountTransferForm" class="transfer-form">
-        <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
-
-        <div class="form-grid">
-          <mat-form-field class="form-field" (click)="transferDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="transferDatePicker"
-              required
-              formControlName="transferDate"
-              placeholder="Select date"
-              title="Transaction Date"
-            />
-            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #transferDatePicker></mat-datepicker>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
-                {{ toOfficeType.name }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
-            <input
-              matInput
-              formControlName="toClientId"
-              [matAutocomplete]="clientsAutocomplete"
-              placeholder="Select or type client name"
-              title="Client name"
-            />
-            <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
-              {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
-            <mat-option *ngFor="let client of clientsData" [value]="client">
-              {{ client.id }} - {{ client.displayName }}
-            </mat-option>
-          </mat-autocomplete>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
-            <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
-                {{ toAccountType.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
-            <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
-              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
-                {{ toAccount.productName }} - {{ toAccount.accountNo }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
-              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="transferAmount"
-              placeholder="Enter amount"
-              title="Transfer amount"
-              min="0.01"
-              step="0.01"
-            />
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')">
-              <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
-              {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field description-field">
-            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <textarea
-              matInput
-              formControlName="transferDescription"
-              cdkTextareaAutosize
-              cdkAutosizeMinRows="2"
-              placeholder="Enter transfer description"
-              title="Transfer description"
-            ></textarea>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
-              {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </form>
-
-      <!-- Interbank Transfer Form Section -->
-      <form
-        *ngIf="interbank && interbankTransferForm && makeAccountTransferForm"
-        [formGroup]="makeAccountTransferForm"
-        class="transfer-form"
-      >
-        <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
-
-        <div class="form-grid">
-          <mat-form-field class="form-field" (click)="transferDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="transferDatePicker"
-              required
-              formControlName="transferDate"
-              placeholder="Select date"
-              title="Transaction Date"
-            />
-            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #transferDatePicker></mat-datepicker>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-            <input matInput formControlName="toBank" [readonly]="true" placeholder="Bank" title="Bank" />
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
-            <input matInput formControlName="toClientId" [readonly]="true" placeholder="Client" title="Client" />
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
-            <input
-              matInput
-              formControlName="toAccountType"
-              [readonly]="true"
-              placeholder="Account Type"
-              title="Account Type"
-            />
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
-            <input matInput formControlName="toAccountId" [readonly]="true" placeholder="Account" title="Account" />
-          </mat-form-field>
-
-          <mat-form-field class="form-field">
-            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="transferAmount"
-              placeholder="Enter amount"
-              title="Transfer amount"
-              min="0.01"
-              step="0.01"
-            />
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('min')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.mustBeAtLeast' | translate }} 0.01
-            </mat-error>
-            <mat-error *ngIf="makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')">
-              <fa-icon icon="exclamation-triangle" size="md"></fa-icon>
-              {{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field class="form-field description-field">
-            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <textarea
-              matInput
-              formControlName="transferDescription"
-              cdkTextareaAutosize
-              cdkAutosizeMinRows="2"
-              placeholder="Enter transfer description"
-              title="Transfer description"
-            ></textarea>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
-              {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-card-content>
-
-    <mat-card-actions *ngIf="!isLoading && makeAccountTransferForm" class="action-buttons">
-      <button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
-        {{ 'labels.buttons.Cancel' | translate }}
-      </button>
-
-      <ng-container *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'">
-        <button
-          *ngIf="interbank && interbankTransferForm"
-          mat-raised-button
-          color="primary"
-          [disabled]="!makeAccountTransferForm.valid"
-          (click)="submit()"
-          class="primary-button"
-        >
-          {{ 'labels.buttons.Submit' | translate }}
-        </button>
-
-        <button
-          *ngIf="!interbank"
-          mat-raised-button
-          color="primary"
-          [disabled]="!makeAccountTransferForm.valid"
-          (click)="submit()"
-          class="primary-button"
-        >
-          {{ 'labels.buttons.Submit' | translate }}
-        </button>
-      </ng-container>
-    </mat-card-actions>
-  </mat-card>
 </div>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import {
   AbstractControl,
@@ -44,6 +44,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private accountTransfersService = inject(AccountTransfersService);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+  private clientsService = inject(ClientsService);
+
   /** Standing Instructions Data */
   accountTransferTemplateData: any;
   /** Minimum date allowed. */
@@ -87,15 +95,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {ClientsService} clientsService Clients Service
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private accountTransfersService: AccountTransfersService,
-    private dateUtils: Dates,
-    private settingsService: SettingsService,
-    private clientsService: ClientsService
-  ) {
     this.route.data.subscribe((data: { accountTransferTemplate: any }) => {
       this.accountTransferTemplateData = data.accountTransferTemplate;
       this.setParams();
@@ -117,7 +117,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
         this.accountTypeId = '2';
         this.id = this.route.snapshot.queryParams['savingsId'];
         this.interbank = this.route.snapshot.queryParams['interbank'] === 'true';
-        const navigationBalance = this.router.getCurrentNavigation()?.extras?.state?.balance;
+        const navigationBalance = this.router.currentNavigation()?.extras?.state?.balance;
         const templateBalance =
           this.accountTransferTemplateData?.fromAccount?.availableBalance ??
           this.accountTransferTemplateData?.fromAccount?.summary?.accountBalance ??
@@ -168,7 +168,8 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
         [
           Validators.required,
           Validators.min(0.01),
-          this.amountExceedsBalanceValidator.bind(this)]
+          this.amountExceedsBalanceValidator.bind(this)
+        ]
       ],
       transferDate: [
         this.settingsService.businessDate,
@@ -207,7 +208,8 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
         [
           Validators.required,
           Validators.min(0.01),
-          this.amountExceedsBalanceValidator.bind(this)]
+          this.amountExceedsBalanceValidator.bind(this)
+        ]
       ],
       transferDate: [
         this.settingsService.businessDate,
@@ -252,7 +254,8 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
         [
           Validators.required,
           Validators.min(0.01),
-          this.amountExceedsBalanceValidator.bind(this)]
+          this.amountExceedsBalanceValidator.bind(this)
+        ]
       ],
       transferDate: [
         this.settingsService.businessDate,

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -1,10 +1,12 @@
 <div class="container">
   <div class="container m-b-20 align-end gap-2px">
-    <span *ngIf="!viewAccountTransferData.reversed">
+    @if (!viewAccountTransferData.reversed) {
-      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
+      <span>
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
+        <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
-      </button>
+          <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
-    </span>
+        </button>
+      </span>
+    }
   </div>
 
   <mat-card>

src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Location, NgIf, NgClass } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
@@ -22,16 +22,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewAccountTransferComponent {
+  private route = inject(ActivatedRoute);
+  private location = inject(Location);
+
   viewAccountTransferData: any;
   /**
    * Retrieves the view account transfer data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Location} location Location.
    */
-  constructor(
+  constructor() {
-    private route: ActivatedRoute,
-    private location: Location
-  ) {
     this.route.data.subscribe((data: { viewAccountTransferData: any }) => {
       this.viewAccountTransferData = data.viewAccountTransferData;
     });

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html

@@ -57,8 +57,12 @@
         <div class="flex-fill">
           <span class="flex-40">{{ 'labels.inputs.Destination' | translate }}:</span>
           <span class="flex-60">
-            <span *ngIf="allowclientedit"> {{ 'labels.inputs.Within Bank' | translate }} </span>
+            @if (allowclientedit) {
-            <span *ngIf="!allowclientedit"> {{ 'labels.inputs.Own Account' | translate }} </span>
+              <span> {{ 'labels.inputs.Within Bank' | translate }} </span>
+            }
+            @if (!allowclientedit) {
+              <span> {{ 'labels.inputs.Own Account' | translate }} </span>
+            }
           </span>
         </div>
 

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
@@ -18,6 +18,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewStandingInstructionsComponent {
+  private route = inject(ActivatedRoute);
+
   /** Standing Instructions Data */
   standingInstructionsData: any;
   /** Allow Client Edit */
@@ -27,7 +29,7 @@ export class ViewStandingInstructionsComponent {
    * Retrieves the standing instructions data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { standingInstructionsData: any }) => {
       this.standingInstructionsData = data.standingInstructionsData;
       if (this.standingInstructionsData.fromClient.id === this.standingInstructionsData.toClient.id) {

src/app/accounting/accounting-routing.module.ts

@@ -386,7 +386,6 @@ const routes: Routes = [
       ]
     }
   ])
-
 ];
 
 /**

src/app/accounting/accounting-rules/accounting-rule.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class AccountingRuleResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the accounting rule data.

src/app/accounting/accounting-rules/accounting-rules-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class AccountingRulesTemplateResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the accounting rules template data.

src/app/accounting/accounting-rules/accounting-rules.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -45,6 +45,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AccountingRulesComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Accounting rule data. */
   accountingRuleData: any;
   /** Columns to be displayed in accounting rules table. */
@@ -68,7 +70,7 @@ export class AccountingRulesComponent implements OnInit {
    * Retrieves the accounting rules data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { accountingRules: any }) => {
       this.accountingRuleData = data.accountingRules;
     });

src/app/accounting/accounting-rules/accounting-rules.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class AccountingRulesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the accounting rules data.

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -6,23 +6,29 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
+            @if (accountingRuleForm.controls.name.hasError('required')) {
-              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
+            @if (accountingRuleForm.controls.officeId.hasError('required')) {
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="rule-wrapper flex-48 layout-row responsive-column">
@@ -40,34 +46,38 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          @if (accountingRuleForm.controls.debitRuleType.value === 'fixedAccount') {
-            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
+            <mat-form-field class="flex-48">
-            <mat-select formControlName="accountToDebit">
+              <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
+              <mat-select formControlName="accountToDebit">
-                {{ glAccount.name }}
+                @for (glAccount of glAccountData; track glAccount) {
-              </mat-option>
+                  <mat-option [value]="glAccount.id">
-            </mat-select>
+                    {{ glAccount.name }}
-          </mat-form-field>
+                  </mat-option>
-
+                }
-          <div
-            class="flex-48 layout-row gap-2percent responsive-column"
-            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
-          >
-            <mat-form-field class="flex-50">
-              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
-              <mat-select formControlName="debitTags" multiple>
-                <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
-                  {{ debitTag.name }}
-                </mat-option>
               </mat-select>
             </mat-form-field>
+          }
 
-            <div class="flex-50" ngClass.gt-md="entries-wrapper">
+          @if (accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts') {
-              <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
+            <div class="flex-48 layout-row gap-2percent responsive-column">
-                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
+              <mat-form-field class="flex-50">
-              </mat-checkbox>
+                <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
+                <mat-select formControlName="debitTags" multiple>
+                  @for (debitTag of debitTagData; track debitTag) {
+                    <mat-option [value]="debitTag.id">
+                      {{ debitTag.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <div class="flex-50" ngClass.gt-md="entries-wrapper">
+                <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
+                  {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
+                </mat-checkbox>
+              </div>
             </div>
-          </div>
+          }
 
           <div class="rule-wrapper flex-48 layout-row responsive-column">
             <mat-label class="flex-50"
@@ -84,34 +94,38 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          @if (accountingRuleForm.controls.creditRuleType.value === 'fixedAccount') {
-            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
+            <mat-form-field class="flex-48">
-            <mat-select formControlName="accountToCredit">
+              <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
+              <mat-select formControlName="accountToCredit">
-                {{ glAccount.name }}
+                @for (glAccount of glAccountData; track glAccount) {
-              </mat-option>
+                  <mat-option [value]="glAccount.id">
-            </mat-select>
+                    {{ glAccount.name }}
-          </mat-form-field>
+                  </mat-option>
-
+                }
-          <div
-            class="flex-48 layout-row gap-2percent responsive-column"
-            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
-          >
-            <mat-form-field class="flex-50">
-              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
-              <mat-select formControlName="creditTags" multiple>
-                <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
-                  {{ creditTag.name }}
-                </mat-option>
               </mat-select>
             </mat-form-field>
+          }
 
-            <div class="flex-50" ngClass.gt-md="entries-wrapper">
+          @if (accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts') {
-              <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
+            <div class="flex-48 layout-row gap-2percent responsive-column">
-                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
+              <mat-form-field class="flex-50">
-              </mat-checkbox>
+                <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
+                <mat-select formControlName="creditTags" multiple>
+                  @for (creditTag of creditTagData; track creditTag) {
+                    <mat-option [value]="creditTag.id">
+                      {{ creditTag.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <div class="flex-50" ngClass.gt-md="entries-wrapper">
+                <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
+                  {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
+                </mat-checkbox>
+              </div>
             </div>
-          </div>
+          }
 
           <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>

src/app/accounting/accounting-rules/create-rule/create-rule.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 { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -29,6 +29,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateRuleComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Accounting rule form. */
   accountingRuleForm: UntypedFormGroup;
   /** Office data. */
@@ -47,12 +52,7 @@ export class CreateRuleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { accountingRulesTemplate: any }) => {
       this.officeData = data.accountingRulesTemplate.allowedOffices;
       this.glAccountData = data.accountingRulesTemplate.allowedAccounts;

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -6,23 +6,29 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
+            @if (accountingRuleForm.controls.name.hasError('required')) {
-              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
+            @if (accountingRuleForm.controls.officeId.hasError('required')) {
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="rule-wrapper flex-48 layout-row responsive-column">
@@ -40,34 +46,38 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          @if (accountingRuleForm.controls.debitRuleType.value === 'fixedAccount') {
-            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
+            <mat-form-field class="flex-48">
-            <mat-select formControlName="accountToDebit">
+              <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
+              <mat-select formControlName="accountToDebit">
-                {{ glAccount.name }}
+                @for (glAccount of glAccountData; track glAccount) {
-              </mat-option>
+                  <mat-option [value]="glAccount.id">
-            </mat-select>
+                    {{ glAccount.name }}
-          </mat-form-field>
+                  </mat-option>
-
+                }
-          <div
-            class="flex-48 layout-row gap-2percent responsive-column"
-            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
-          >
-            <mat-form-field class="flex-50">
-              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
-              <mat-select formControlName="debitTags" multiple>
-                <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
-                  {{ debitTag.name }}
-                </mat-option>
               </mat-select>
             </mat-form-field>
+          }
 
-            <div class="flex-50 entries-wrapper">
+          @if (accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts') {
-              <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
+            <div class="flex-48 layout-row gap-2percent responsive-column">
-                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
+              <mat-form-field class="flex-50">
-              </mat-checkbox>
+                <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
+                <mat-select formControlName="debitTags" multiple>
+                  @for (debitTag of debitTagData; track debitTag) {
+                    <mat-option [value]="debitTag.id">
+                      {{ debitTag.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <div class="flex-50 entries-wrapper">
+                <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
+                  {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
+                </mat-checkbox>
+              </div>
             </div>
-          </div>
+          }
 
           <div class="rule-wrapper flex-48 layout-row responsive-column">
             <mat-label class="flex-50"
@@ -84,34 +94,38 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          @if (accountingRuleForm.controls.creditRuleType.value === 'fixedAccount') {
-            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
+            <mat-form-field class="flex-48">
-            <mat-select formControlName="accountToCredit">
+              <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
+              <mat-select formControlName="accountToCredit">
-                {{ glAccount.name }}
+                @for (glAccount of glAccountData; track glAccount) {
-              </mat-option>
+                  <mat-option [value]="glAccount.id">
-            </mat-select>
+                    {{ glAccount.name }}
-          </mat-form-field>
+                  </mat-option>
-
+                }
-          <div
-            class="flex-48 layout-row gap-2percent responsive-column"
-            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
-          >
-            <mat-form-field class="flex-50">
-              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
-              <mat-select formControlName="creditTags" multiple>
-                <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
-                  {{ creditTag.name }}
-                </mat-option>
               </mat-select>
             </mat-form-field>
+          }
 
-            <div class="flex-50 entries-wrapper">
+          @if (accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts') {
-              <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
+            <div class="flex-48 layout-row gap-2percent responsive-column">
-                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
+              <mat-form-field class="flex-50">
-              </mat-checkbox>
+                <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
+                <mat-select formControlName="creditTags" multiple>
+                  @for (creditTag of creditTagData; track creditTag) {
+                    <mat-option [value]="creditTag.id">
+                      {{ creditTag.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <div class="flex-50 entries-wrapper">
+                <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
+                  {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
+                </mat-checkbox>
+              </div>
             </div>
-          </div>
+          }
 
           <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>

src/app/accounting/accounting-rules/edit-rule/edit-rule.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 { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -29,6 +29,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditRuleComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Accounting rule form. */
   accountingRuleForm: UntypedFormGroup;
   /** Accounting rule. */
@@ -49,12 +54,7 @@ export class EditRuleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { accountingRulesTemplate: any; accountingRule: any }) => {
       this.officeData = data.accountingRulesTemplate.allowedOffices;
       this.glAccountData = data.accountingRulesTemplate.allowedAccounts;

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -22,10 +22,12 @@
         <div class="value">{{ accountingRule.officeName }}</div>
       </div>
 
-      <div class="content-row" *ngIf="accountingRule.description">
+      @if (accountingRule.description) {
-        <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
+        <div class="content-row">
-        <div class="value">{{ accountingRule.description }}</div>
+          <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
-      </div>
+          <div class="value">{{ accountingRule.description }}</div>
+        </div>
+      }
 
       <div class="content-row">
         <div class="label">{{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}</div>
@@ -41,37 +43,49 @@
 
   <mat-card>
     <mat-card-content class="content-rows">
-      <div class="content-row" *ngIf="accountingRule.debitTags?.length">
+      @if (accountingRule.debitTags?.length) {
-        <div class="label">{{ 'labels.inputs.Debit Tags' | translate }}</div>
+        <div class="content-row">
-        <div class="value">
+          <div class="label">{{ 'labels.inputs.Debit Tags' | translate }}</div>
-          <span *ngFor="let debitTag of accountingRule.debitTags">{{ debitTag.tag.name }}</span>
+          <div class="value">
+            @for (debitTag of accountingRule.debitTags; track debitTag) {
+              <span>{{ debitTag.tag.name }}</span>
+            }
+          </div>
         </div>
-      </div>
+      }
 
-      <div class="content-row" *ngIf="accountingRule.debitAccounts?.length">
+      @if (accountingRule.debitAccounts?.length) {
-        <div class="label">{{ 'labels.inputs.Debit Account Name' | translate }}</div>
+        <div class="content-row">
-        <div class="value">
+          <div class="label">{{ 'labels.inputs.Debit Account Name' | translate }}</div>
-          <span *ngFor="let debitAccount of accountingRule.debitAccounts">{{
+          <div class="value">
-            debitAccount.name + ' (' + debitAccount.glCode + ')'
+            @for (debitAccount of accountingRule.debitAccounts; track debitAccount) {
-          }}</span>
+              <span>{{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}</span>
+            }
+          </div>
         </div>
-      </div>
+      }
 
-      <div class="content-row" *ngIf="accountingRule.creditTags?.length">
+      @if (accountingRule.creditTags?.length) {
-        <div class="label">{{ 'labels.inputs.Credit Tags' | translate }}</div>
+        <div class="content-row">
-        <div class="value">
+          <div class="label">{{ 'labels.inputs.Credit Tags' | translate }}</div>
-          <span *ngFor="let creditTag of accountingRule.creditTags">{{ creditTag.tag.name }}</span>
+          <div class="value">
+            @for (creditTag of accountingRule.creditTags; track creditTag) {
+              <span>{{ creditTag.tag.name }}</span>
+            }
+          </div>
         </div>
-      </div>
+      }
 
-      <div class="content-row" *ngIf="accountingRule.creditAccounts?.length">
+      @if (accountingRule.creditAccounts?.length) {
-        <div class="label">{{ 'labels.inputs.Credit Account Name' | translate }}</div>
+        <div class="content-row">
-        <div class="value">
+          <div class="label">{{ 'labels.inputs.Credit Account Name' | translate }}</div>
-          <span *ngFor="let creditAccount of accountingRule.creditAccounts">{{
+          <div class="value">
-            creditAccount.name + ' (' + creditAccount.glCode + ')'
+            @for (creditAccount of accountingRule.creditAccounts; track creditAccount) {
-          }}</span>
+              <span>{{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}</span>
+            }
+          </div>
         </div>
-      </div>
+      }
     </mat-card-content>
   </mat-card>
 </div>

src/app/accounting/accounting-rules/view-rule/view-rule.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -24,6 +24,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewRuleComponent {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   /** Accounting rule. */
   accountingRule: any;
 
@@ -34,12 +39,7 @@ export class ViewRuleComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
     this.route.data.subscribe((data: { accountingRule: any }) => {
       this.accountingRule = data.accountingRule;
     });

src/app/accounting/accounting.component.html

@@ -11,24 +11,20 @@
                 </mat-icon>
                 <div matLine>
                   {{ 'labels.heading.Frequent Postings' | translate }}
-                  <p
+                  @if (arrowBooleans[0]) {
-                    matLine
+                    <p matLine [routerLink]="['journal-entries/frequent-postings']" class="menu-explanation">
-                    *ngIf="arrowBooleans[0]"
+                      {{ 'labels.text.These are predefined postings' | translate }}
-                    [routerLink]="['journal-entries/frequent-postings']"
+                    </p>
-                    class="menu-explanation"
+                  }
-                  >
-                    {{ 'labels.text.These are predefined postings' | translate }}
-                  </p>
                 </div>
               </div>
               <div class="menu-right-section">
-                <fa-icon
+                @if (!arrowBooleans[0]) {
-                  (click)="arrowBooleansToggle(0)"
+                  <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-down" size="md"></fa-icon>
-                  *ngIf="!arrowBooleans[0]"
+                }
-                  icon="arrow-down"
+                @if (arrowBooleans[0]) {
-                  size="md"
+                  <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-up" size="md"></fa-icon>
-                ></fa-icon>
+                }
-                <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
               </div>
             </div>
           </mat-list-item>
@@ -42,29 +38,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Create Journal Entries' | translate }}
-                    <p
+                    @if (arrowBooleans[1]) {
-                      matLine
+                      <p matLine [routerLink]="['journal-entries/create']" class="menu-explanation">
-                      *ngIf="arrowBooleans[1]"
+                        {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
-                      [routerLink]="['journal-entries/create']"
+                      </p>
-                      class="menu-explanation"
+                    }
-                    >
-                      {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
-                    </p>
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
+                  @if (!arrowBooleans[1]) {
-                    (click)="arrowBooleansToggle(1)"
+                    <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-down" size="md"></fa-icon>
-                    *ngIf="!arrowBooleans[1]"
+                  }
-                    icon="arrow-down"
+                  @if (arrowBooleans[1]) {
-                    size="md"
+                    <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-up" size="md"></fa-icon>
-                  ></fa-icon>
+                  }
-                  <fa-icon
-                    (click)="arrowBooleansToggle(1)"
-                    *ngIf="arrowBooleans[1]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
                 </div>
               </div>
             </mat-list-item>
@@ -78,19 +65,20 @@
                 </mat-icon>
                 <div matLine>
                   {{ 'labels.heading.Search Journal Entries' | translate }}
-                  <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']" class="menu-explanation">
+                  @if (arrowBooleans[2]) {
-                    {{ 'labels.text.Advanced search option for journal entries' | translate }}
+                    <p matLine [routerLink]="['journal-entries']" class="menu-explanation">
-                  </p>
+                      {{ 'labels.text.Advanced search option for journal entries' | translate }}
+                    </p>
+                  }
                 </div>
               </div>
               <div class="menu-right-section">
-                <fa-icon
+                @if (!arrowBooleans[2]) {
-                  (click)="arrowBooleansToggle(2)"
+                  <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-down" size="md"></fa-icon>
-                  *ngIf="!arrowBooleans[2]"
+                }
-                  icon="arrow-down"
+                @if (arrowBooleans[2]) {
-                  size="md"
+                  <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-up" size="md"></fa-icon>
-                ></fa-icon>
+                }
-                <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
               </div>
             </div>
           </mat-list-item>
@@ -104,29 +92,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
-                    <p
+                    @if (arrowBooleans[3]) {
-                      matLine
+                      <p matLine [routerLink]="['financial-activity-mappings']" class="menu-explanation">
-                      *ngIf="arrowBooleans[3]"
+                        {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
-                      [routerLink]="['financial-activity-mappings']"
+                      </p>
-                      class="menu-explanation"
+                    }
-                    >
-                      {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
-                    </p>
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
+                  @if (!arrowBooleans[3]) {
-                    (click)="arrowBooleansToggle(3)"
+                    <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-down" size="md"></fa-icon>
-                    *ngIf="!arrowBooleans[3]"
+                  }
-                    icon="arrow-down"
+                  @if (arrowBooleans[3]) {
-                    size="md"
+                    <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-up" size="md"></fa-icon>
-                  ></fa-icon>
+                  }
-                  <fa-icon
-                    (click)="arrowBooleansToggle(3)"
-                    *ngIf="arrowBooleans[3]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
                 </div>
               </div>
             </mat-list-item>
@@ -141,29 +120,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
-                    <p
+                    @if (arrowBooleans[4]) {
-                      matLine
+                      <p matLine [routerLink]="['migrate-opening-balances']" class="menu-explanation">
-                      *ngIf="arrowBooleans[4]"
+                        {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
-                      [routerLink]="['migrate-opening-balances']"
+                      </p>
-                      class="menu-explanation"
+                    }
-                    >
-                      {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
-                    </p>
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
+                  @if (!arrowBooleans[4]) {
-                    (click)="arrowBooleansToggle(4)"
+                    <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-down" size="md"></fa-icon>
-                    *ngIf="!arrowBooleans[4]"
+                  }
-                    icon="arrow-down"
+                  @if (arrowBooleans[4]) {
-                    size="md"
+                    <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-up" size="md"></fa-icon>
-                  ></fa-icon>
+                  }
-                  <fa-icon
-                    (click)="arrowBooleansToggle(4)"
-                    *ngIf="arrowBooleans[4]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
                 </div>
               </div>
             </mat-list-item>
@@ -182,24 +152,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Chart of Accounts' | translate }}
-                    <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']" class="menu-explanation">
+                    @if (arrowBooleans[5]) {
-                      {{ 'labels.text.List of accounts used by the organization' | translate }}
+                      <p matLine [routerLink]="['chart-of-accounts']" class="menu-explanation">
-                    </p>
+                        {{ 'labels.text.List of accounts used by the organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
+                  @if (!arrowBooleans[5]) {
-                    (click)="arrowBooleansToggle(5)"
+                    <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-down" size="md"></fa-icon>
-                    *ngIf="!arrowBooleans[5]"
+                  }
-                    icon="arrow-down"
+                  @if (arrowBooleans[5]) {
-                    size="md"
+                    <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-up" size="md"></fa-icon>
-                  ></fa-icon>
+                  }
-                  <fa-icon
-                    (click)="arrowBooleansToggle(5)"
-                    *ngIf="arrowBooleans[5]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
                 </div>
               </div>
             </mat-list-item>
@@ -214,24 +180,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Closing Entries' | translate }}
-                    <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']" class="menu-explanation">
+                    @if (arrowBooleans[6]) {
-                      {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+                      <p matLine [routerLink]="['closing-entries']" class="menu-explanation">
-                    </p>
+                        {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
+                  @if (!arrowBooleans[6]) {
-                    (click)="arrowBooleansToggle(6)"
+                    <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-down" size="md"></fa-icon>
-                    *ngIf="!arrowBooleans[6]"
+                  }
-                    icon="arrow-down"
+                  @if (arrowBooleans[6]) {
-                    size="md"
+                    <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-up" size="md"></fa-icon>
-                  ></fa-icon>
+                  }
-                  <fa-icon
-                    (click)="arrowBooleansToggle(6)"
-                    *ngIf="arrowBooleans[6]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
                 </div>
               </div>
             </mat-list-item>
@@ -245,19 +207,20 @@
                 </mat-icon>
                 <div matLine>
                   {{ 'labels.heading.Accounting Rules' | translate }}
-                  <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']" class="menu-explanation">
+                  @if (arrowBooleans[7]) {
-                    {{ 'labels.text.List of all accounting rules' | translate }}
+                    <p matLine [routerLink]="['accounting-rules']" class="menu-explanation">
-                  </p>
+                      {{ 'labels.text.List of all accounting rules' | translate }}
+                    </p>
+                  }
                 </div>
               </div>
               <div class="menu-right-section">
-                <fa-icon
+                @if (!arrowBooleans[7]) {
-                  (click)="arrowBooleansToggle(7)"
+                  <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-down" size="md"></fa-icon>
-                  *ngIf="!arrowBooleans[7]"
+                }
-                  icon="arrow-down"
+                @if (arrowBooleans[7]) {
-                  size="md"
+                  <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-up" size="md"></fa-icon>
-                ></fa-icon>
+                }
-                <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
               </div>
             </div>
           </mat-list-item>
@@ -270,19 +233,20 @@
                 </mat-icon>
                 <div matLine>
                   {{ 'labels.heading.Accruals' | translate }}
-                  <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']" class="menu-explanation">
+                  @if (arrowBooleans[8]) {
-                    {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+                    <p matLine [routerLink]="['periodic-accruals']" class="menu-explanation">
-                  </p>
+                      {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+                    </p>
+                  }
                 </div>
               </div>
               <div class="menu-right-section">
-                <fa-icon
+                @if (!arrowBooleans[8]) {
-                  (click)="arrowBooleansToggle(8)"
+                  <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-down" size="md"></fa-icon>
-                  *ngIf="!arrowBooleans[8]"
+                }
-                  icon="arrow-down"
+                @if (arrowBooleans[8]) {
-                  size="md"
+                  <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-up" size="md"></fa-icon>
-                ></fa-icon>
+                }
-                <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
               </div>
             </div>
           </mat-list-item>
@@ -295,19 +259,20 @@
                 </mat-icon>
                 <div matLine>
                   {{ 'labels.heading.Provisioning Entries' | translate }}
-                  <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']" class="menu-explanation">
+                  @if (arrowBooleans[9]) {
-                    {{ 'labels.text.Create provisioning entries' | translate }}
+                    <p matLine [routerLink]="['provisioning-entries']" class="menu-explanation">
-                  </p>
+                      {{ 'labels.text.Create provisioning entries' | translate }}
+                    </p>
+                  }
                 </div>
               </div>
               <div class="menu-right-section">
-                <fa-icon
+                @if (!arrowBooleans[9]) {
-                  (click)="arrowBooleansToggle(9)"
+                  <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-down" size="md"></fa-icon>
-                  *ngIf="!arrowBooleans[9]"
+                }
-                  icon="arrow-down"
+                @if (arrowBooleans[9]) {
-                  size="md"
+                  <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-up" size="md"></fa-icon>
-                ></fa-icon>
+                }
-                <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
               </div>
             </div>
           </mat-list-item>

src/app/accounting/accounting.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild, inject } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
@@ -28,6 +28,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AccountingComponent implements AfterViewInit {
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /* Reference of Chart of Accounts */
   @ViewChild('chartofAccounts') chartofAccounts: ElementRef<any>;
   /* Template for popover on Chart of Accounts */
@@ -51,17 +55,6 @@ export class AccountingComponent implements AfterViewInit {
   // Initialize an array of 10 boolean values, all set to false
   arrowBooleans: boolean[] = new Array(10).fill(false);
 
-  /**
-   * @param {Router} router Router.
-   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
-   * @param {PopoverService} popoverService PopoverService.
-   */
-  constructor(
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {}
-
   /**
    * Popover function
    * @param template TemplateRef<any>.

src/app/accounting/accounting.service.ts

@@ -1,7 +1,7 @@
 /** TODO: Separate services for feature modules for cleaner accounting service. */
 
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -14,10 +14,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class AccountingService {
-  /**
+  private http = inject(HttpClient);
-   * @param {HttpClient} http Http Client to send requests.
-   */
-  constructor(private http: HttpClient) {}
 
   /**
    * @returns {Observable<any>} Offices data ordered by id.

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -70,22 +70,24 @@
           {{ 'labels.inputs.Manual Entries Allowed' | translate }}
         </th>
         <td mat-cell *matCellDef="let glAccount">
-          <fa-icon
+          @if (glAccount.manualEntriesAllowed) {
-            *ngIf="glAccount.manualEntriesAllowed"
+            <fa-icon
-            class="manual-entries-allowed"
+              class="manual-entries-allowed"
-            matTooltip="{{ 'tooltips.Allowed' | translate }}"
+              matTooltip="{{ 'tooltips.Allowed' | translate }}"
-            matTooltipPosition="right"
+              matTooltipPosition="right"
-            icon="check-circle"
+              icon="check-circle"
-            size="lg"
+              size="lg"
-          ></fa-icon>
+            ></fa-icon>
-          <fa-icon
+          }
-            *ngIf="!glAccount.manualEntriesAllowed"
+          @if (!glAccount.manualEntriesAllowed) {
-            class="manual-entries-not-allowed"
+            <fa-icon
-            matTooltip="{{ 'tooltips.' | translate }}"
+              class="manual-entries-not-allowed"
-            matTooltipPosition="right"
+              matTooltip="{{ 'tooltips.' | translate }}"
-            icon="times-circle"
+              matTooltipPosition="right"
-            size="lg"
+              icon="times-circle"
-          ></fa-icon>
+              size="lg"
+            ></fa-icon>
+          }
         </td>
       </ng-container>
 
@@ -123,7 +125,9 @@
           <li class="mat-tree-node">
             <button mat-icon-button disabled></button>
             <span (click)="viewGLAccountNode(node)">
-              <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+              @if (node.glCode) {
+                <span class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+              }
               {{ node.name }}
             </span>
           </li>
@@ -139,7 +143,9 @@
                 ></fa-icon>
               </button>
               <span (click)="viewGLAccountNode(node)">
-                <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+                @if (node.glCode) {
+                  <span class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+                }
                 {{ node.name }}
               </span>
             </div>
@@ -151,61 +157,52 @@
       </mat-tree>
     </div>
 
-    <div class="flex-48" *ngIf="glAccount">
+    @if (glAccount) {
-      <mat-card>
+      <div class="flex-48">
-        <mat-card-content>
+        <mat-card>
-          <div class="layout-row-wrap">
+          <mat-card-content>
-            <div class="flex-50 header">
+            <div class="layout-row-wrap">
-              {{ 'labels.inputs.Account Name' | translate }}
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Name' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.name }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.GL Code' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.glCode }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Type' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Usage' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.usage }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Manual Entries Allowed' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.manualEntriesAllowed }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Description' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.description }}
+              </div>
             </div>
-
+          </mat-card-content>
-            <div class="flex-50">
+        </mat-card>
-              {{ glAccount.name }}
+      </div>
-            </div>
+    }
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.GL Code' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.glCode }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Account Type' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Account Usage' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.usage }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.manualEntriesAllowed }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Description' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.description }}
-            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
   </div>
 </div>
 

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -81,6 +81,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
+  private glAccountTreeService = inject(GlAccountTreeService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private treeControlService = inject(TreeControlService);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Button toggle group form control for type of view. (list/tree) */
   viewGroup = new UntypedFormControl('listView');
   /** GL Account data. */
@@ -127,14 +134,9 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
+  constructor() {
-    private glAccountTreeService: GlAccountTreeService,
+    const glAccountTreeService = this.glAccountTreeService;
-    private route: ActivatedRoute,
+
-    private router: Router,
-    private treeControlService: TreeControlService,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
     this.route.data.subscribe((data: { chartOfAccounts: any }) => {
       this.glAccountData = data.chartOfAccounts;
       glAccountTreeService.initialize(this.glAccountData);

src/app/accounting/chart-of-accounts/chart-of-accounts.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ChartOfAccountsResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the chart of accounts data.

src/app/accounting/chart-of-accounts/create-gl-account/chart-of-accounts-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ChartOfAccountsTemplateResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the chart of accounts template data.

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -6,65 +6,69 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
-              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
+              @for (accountType of accountTypeData; track accountType) {
-                {{ 'labels.inputs.accounting.' + accountType.value | translate }}
+                <mat-option [value]="accountType.id">
-              </mat-option>
+                  {{ 'labels.inputs.accounting.' + accountType.value | translate }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error
+            @if (
-              *ngIf="
+              glAccountForm.controls.type.hasError('required') &&
-                glAccountForm.controls.type.hasError('required') &&
+              (glAccountForm.controls.type.touched || glAccountForm.controls.type.dirty)
-                (glAccountForm.controls.type.touched || glAccountForm.controls.type.dirty)
+            ) {
-              "
+              <mat-error>
-            >
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
-            </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error
+            @if (
-              *ngIf="
+              glAccountForm.controls.name.hasError('required') &&
-                glAccountForm.controls.name.hasError('required') &&
+              (glAccountForm.controls.name.touched || glAccountForm.controls.name.dirty)
-                (glAccountForm.controls.name.touched || glAccountForm.controls.name.dirty)
+            ) {
-              "
+              <mat-error>
-            >
+                {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
-              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
-            </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
-              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
+              @for (accountUsage of accountUsageData; track accountUsage) {
-                {{ accountUsage.value }}
+                <mat-option [value]="accountUsage.id">
-              </mat-option>
+                  {{ accountUsage.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error
+            @if (
-              *ngIf="
+              glAccountForm.controls.usage.hasError('required') &&
-                glAccountForm.controls.usage.hasError('required') &&
+              (glAccountForm.controls.usage.touched || glAccountForm.controls.usage.dirty)
-                (glAccountForm.controls.usage.touched || glAccountForm.controls.usage.dirty)
+            ) {
-              "
+              <mat-error>
-            >
+                {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
-              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
-            </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
-            <mat-error
+            @if (
-              *ngIf="
+              glAccountForm.controls.glCode.hasError('required') &&
-                glAccountForm.controls.glCode.hasError('required') &&
+              (glAccountForm.controls.glCode.touched || glAccountForm.controls.glCode.dirty)
-                (glAccountForm.controls.glCode.touched || glAccountForm.controls.glCode.dirty)
+            ) {
-              "
+              <mat-error>
-            >
+                {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
-              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
-            </mat-error>
+            }
           </mat-form-field>
 
           <mifosx-gl-account-selector
@@ -79,9 +83,11 @@
           <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
-              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
+              @for (tag of tagData; track tag) {
-                {{ tag.name }}
+                <mat-option [value]="tag.id">
-              </mat-option>
+                  {{ tag.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -32,6 +32,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  dialog = inject(MatDialog);
+
   /** GL account form. */
   glAccountForm: UntypedFormGroup;
   /** Chart of accounts data. */
@@ -66,15 +74,7 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
    * @param {PopoverService} popoverService PopoverService.
    * @param {Matdialog} dialog Matdialog.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    public dialog: MatDialog
-  ) {
     this.route.queryParamMap.subscribe((params) => {
       this.accountTypeId = Number(params.get('accountType'));
       this.parentId = Number(params.get('parent'));

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -6,45 +6,57 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
-              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
+              @for (accountType of accountTypeData; track accountType) {
-                {{ accountType.value }}
+                <mat-option [value]="accountType.id">
-              </mat-option>
+                  {{ accountType.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
+            @if (glAccountForm.controls.type.hasError('required')) {
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
+            @if (glAccountForm.controls.name.hasError('required')) {
-              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
-              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
+              @for (accountUsage of accountUsageData; track accountUsage) {
-                {{ accountUsage.value }}
+                <mat-option [value]="accountUsage.id">
-              </mat-option>
+                  {{ accountUsage.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
+            @if (glAccountForm.controls.usage.hasError('required')) {
-              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
-            <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
+            @if (glAccountForm.controls.glCode.hasError('required')) {
-              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mifosx-gl-account-selector
@@ -59,9 +71,11 @@
           <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
-              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
+              @for (tag of tagData; track tag) {
-                {{ tag.name }}
+                <mat-option [value]="tag.id">
-              </mat-option>
+                  {{ tag.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -25,6 +25,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditGlAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** GL account form. */
   glAccountForm: UntypedFormGroup;
   /** GL account and chart of accounts data. */
@@ -45,12 +50,7 @@ export class EditGlAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
       this.glAccount = data.glAccountAndChartOfAccountsTemplate;
     });

src/app/accounting/chart-of-accounts/gl-account-and-chart-of-accounts-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -14,10 +14,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class GlAccountAndChartOfAccountsTemplateResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the gl account and chart of accounts template data.

src/app/accounting/chart-of-accounts/gl-account-tree.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { BehaviorSubject } from 'rxjs';
@@ -16,6 +16,8 @@ import { GLAccount } from 'app/shared/models/general.model';
   providedIn: 'root'
 })
 export class GlAccountTreeService {
+  private translateService = inject(TranslateService);
+
   /** GL Account data. */
   glAccountData: any;
   /** Chart of accounts tree data behavior subject to represent chart of accounts tree nodes. */
@@ -28,8 +30,6 @@ export class GlAccountTreeService {
     return this.treeDataChange.value;
   }
 
-  constructor(private translateService: TranslateService) {}
-
   /**
    * Builds the chart of accounts tree and emits the value.
    * @param {any} glAccountData Chart of accounts data.

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,15 +1,16 @@
 <div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
-    <button
+    @if (glAccount.usage.value === 'HEADER') {
-      mat-raised-button
+      <button
-      color="primary"
+        mat-raised-button
-      *ngIf="glAccount.usage.value === 'HEADER'"
+        color="primary"
-      [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
+        [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
-      [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
+        [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
-    >
+      >
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Subledger Account' | translate }}
+        {{ 'labels.buttons.Subledger Account' | translate }}
-    </button>
+      </button>
+    }
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
@@ -20,17 +21,21 @@
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
+    @if (!glAccount.disabled) {
-      <fa-icon icon="lock" class="m-r-10"></fa-icon>
+      <button mat-raised-button color="warn" (click)="changeGlAccountState()">
-      {{ 'labels.buttons.Disable' | translate }}
+        <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    </button>
+        {{ 'labels.buttons.Disable' | translate }}
+      </button>
+    }
   </span>
 
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
+    @if (glAccount.disabled) {
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
+      <button mat-raised-button color="accent" (click)="changeGlAccountState()">
-      {{ 'labels.buttons.Enable' | translate }}
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    </button>
+        {{ 'labels.buttons.Enable' | translate }}
+      </button>
+    }
   </span>
 
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
@@ -54,22 +59,26 @@
           <div class="value">{{ glAccount.glCode }}</div>
         </div>
 
-        <div class="content-row" *ngIf="glAccount.parent">
+        @if (glAccount.parent) {
-          <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
+          <div class="content-row">
-          <div class="value">
+            <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
-            <a
+            <div class="value">
-              class="tab-link"
+              <a
-              [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
+                class="tab-link"
-            >
+                [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
-              <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
+              >
-            </a>
+                <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
+              </a>
+            </div>
           </div>
-        </div>
+        }
 
-        <div class="content-row" *ngIf="glAccount.tagId.id">
+        @if (glAccount.tagId.id) {
-          <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
+          <div class="content-row">
-          <div class="value">{{ glAccount.tagId.name }}</div>
+            <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
-        </div>
+            <div class="value">{{ glAccount.tagId.name }}</div>
+          </div>
+        }
 
         <div class="content-row">
           <div class="label">{{ 'labels.inputs.Account Usage' | translate }}</div>
@@ -81,10 +90,12 @@
           <div class="value">{{ glAccount.manualEntriesAllowed | yesNo }}</div>
         </div>
 
-        <div class="content-row" *ngIf="glAccount.description">
+        @if (glAccount.description) {
-          <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
+          <div class="content-row">
-          <div class="value">{{ glAccount.description }}</div>
+            <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
-        </div>
+            <div class="value">{{ glAccount.description }}</div>
+          </div>
+        }
       </div>
     </mat-card-content>
 

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -8,7 +8,7 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { Location, NgIf } from '@angular/common';
+import { Location } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { GlAccountDisplayComponent } from '../../../shared/accounting/gl-account-display/gl-account-display.component';
 import { YesnoPipe } from '../../../pipes/yesno.pipe';
@@ -29,6 +29,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewGlAccountComponent {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private location = inject(Location);
+
   /** GL Account. */
   glAccount: any;
 
@@ -39,13 +45,7 @@ export class ViewGlAccountComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private location: Location
-  ) {
     this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
       this.glAccount = data.glAccountAndChartOfAccountsTemplate;
     });

src/app/accounting/closing-entries/closing-entries.component.html

@@ -16,9 +16,11 @@
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let office of filteredOfficeData | async" [value]="office.name">
+  @for (office of filteredOfficeData | async; track office) {
-    {{ office.name }}
+    <mat-option [value]="office.name">
-  </mat-option>
+      {{ office.name }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <div class="container">

src/app/accounting/closing-entries/closing-entries.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -26,7 +26,7 @@ import { PopoverService } from '../../configuration-wizard/popover/popover.servi
 import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
-import { NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -58,6 +58,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClosingEntriesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Columns to be displayed in closing entries table. */
   displayedColumns: string[] = [
     'officeName',
@@ -97,12 +102,7 @@ export class ClosingEntriesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
+  constructor() {
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
     this.route.data.subscribe((data: { offices: any; glAccountClosures: any }) => {
       this.officeData = data.offices;
       this.glAccountClosureData = data.glAccountClosures;

src/app/accounting/closing-entries/closing-entries.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ClosingEntriesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the gl account closures data.

src/app/accounting/closing-entries/closing-entry.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ClosingEntryResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the gl account closure data.

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -6,14 +6,18 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
+            @if (accountingClosureForm.controls.officeId.hasError('required')) {
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
@@ -28,10 +32,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
-            <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
+            @if (accountingClosureForm.controls.closingDate.hasError('required')) {
-              {{ 'labels.inputs.Closing Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Closing Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>

src/app/accounting/closing-entries/create-closure/create-closure.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateClosureComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum closing date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum closing date allowed. */
@@ -39,14 +46,7 @@ export class CreateClosureComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -6,9 +6,11 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/closing-entries/edit-closure/edit-closure.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -21,6 +21,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditClosureComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Accounting closure form. */
   accountingClosureForm: UntypedFormGroup;
   /** GL Account closure. */
@@ -35,12 +40,7 @@ export class EditClosureComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { glAccountClosure: any }) => {
       this.glAccountClosure = data.glAccountClosure;
     });

src/app/accounting/closing-entries/view-closure/view-closure.component.html

@@ -9,66 +9,55 @@
   </button>
 </div>
 
-<div class="container" *ngIf="glAccountClosure">
+@if (glAccountClosure) {
-  <mat-card>
+  <div class="container">
-    <mat-card-content>
+    <mat-card>
-      <div class="layout-row-wrap">
+      <mat-card-content>
-        <div class="flex-50 header">
+        <div class="layout-row-wrap">
-          {{ 'labels.inputs.Office' | translate }}
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Office' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.officeName }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Closure Date' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.closingDate }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Closed By' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.createdByUsername }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Updated By' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.lastUpdatedByUsername }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Updated On' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.lastUpdatedDate }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Closure Creation Date' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.createdDate }}
+          </div>
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Comments' | translate }}
+          </div>
+          <div class="flex-50">
+            {{ glAccountClosure.comments }}
+          </div>
         </div>
-
+      </mat-card-content>
-        <div class="flex-50">
+    </mat-card>
-          {{ glAccountClosure.officeName }}
+  </div>
-        </div>
+}
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Closure Date' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.closingDate }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Closed By' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.createdByUsername }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Updated By' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.lastUpdatedByUsername }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Updated On' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.lastUpdatedDate }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Closure Creation Date' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.createdDate }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Comments' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ glAccountClosure.comments }}
-        </div>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>

src/app/accounting/closing-entries/view-closure/view-closure.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -24,6 +24,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewClosureComponent {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   /** GL Account closure. */
   glAccountClosure: any;
 
@@ -34,12 +39,7 @@ export class ViewClosureComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
     this.route.data.subscribe((data: { glAccountClosure: any }) => {
       this.glAccountClosure = data.glAccountClosure;
     });

src/app/accounting/common-resolvers/accounting-rules-associations.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class AccountingRulesAssociationsResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the accounting rules associations data.

src/app/accounting/common-resolvers/currencies.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class CurrenciesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the currencies data.

src/app/accounting/common-resolvers/external-asset-configuration.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { SystemService } from 'app/system/system.service';
  */
 @Injectable()
 export class ExternalAssetConfigurationResolver {
-  /**
+  private systemService = inject(SystemService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private systemService: SystemService) {}
 
   /**
    * Returns the offices data.

src/app/accounting/common-resolvers/gl-accounts.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class GlAccountsResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the gl accounts data.

src/app/accounting/common-resolvers/journal-entry-transaction.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class JournalEntryTransactionResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the transaction data.

src/app/accounting/common-resolvers/loan-products.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class LoanProductsResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the loan products data.

src/app/accounting/common-resolvers/offices.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class OfficesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the offices data.

src/app/accounting/common-resolvers/payment-types.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class PaymentTypesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the payment types data.

src/app/accounting/common-resolvers/provisioning-categories.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ProvisioningCategoriesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the Provisioning categories data.

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -6,129 +6,131 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
+            @if (journalEntryForm.controls.officeId.hasError('required')) {
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-24">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
-              <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+              @for (currency of currencyData; track currency) {
-                {{ currency.displayLabel }}
+                <mat-option [value]="currency.code">
-              </mat-option>
+                  {{ currency.displayLabel }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
+            @if (journalEntryForm.controls.currencyCode.hasError('required')) {
-              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field class="flex-24" *ngIf="assetExternalizationEnabled">
+          @if (assetExternalizationEnabled) {
-            <mat-label>{{ 'labels.inputs.External Asset Owner' | translate }}</mat-label>
+            <mat-form-field class="flex-24">
-            <input matInput formControlName="externalAssetOwner" />
+              <mat-label>{{ 'labels.inputs.External Asset Owner' | translate }}</mat-label>
-          </mat-form-field>
+              <input matInput formControlName="externalAssetOwner" />
+            </mat-form-field>
+          }
 
-          <div
+          @for (debit of debits.controls; track debit; let i = $index) {
-            class="flex-fill layout-row-wrap responsive-column"
+            <div class="flex-fill layout-row-wrap responsive-column" formArrayName="debits">
-            formArrayName="debits"
+              <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-            *ngFor="let debit of debits.controls; let i = index"
+                <mifosx-gl-account-selector
-          >
+                  class="flex-48"
-            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+                  [inputFormControl]="debits.at(i).controls.glAccountId"
-              <mifosx-gl-account-selector
+                  [glAccountList]="glAccountData"
-                class="flex-48"
+                  [required]="true"
-                [inputFormControl]="debits.at(i).controls.glAccountId"
+                  [inputLabel]="'Affected GL Entry (Debit)'"
-                [glAccountList]="glAccountData"
-                [required]="true"
-                [inputLabel]="'Affected GL Entry (Debit)'"
-              >
-              </mifosx-gl-account-selector>
-
-              <mat-form-field class="flex-43">
-                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
-                <input
-                  type="number"
-                  matInput
-                  required
-                  formControlName="amount"
-                  min="1"
-                  (input)="onAmountInput($event)"
-                />
-                <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              </mat-form-field>
-
-              <span class="flex-fill">
-                <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
-                  <fa-icon icon="minus-circle" size="lg"></fa-icon>
-                </button>
-                <button
-                  *ngIf="i === 0"
-                  type="button"
-                  mat-icon-button
-                  color="primary"
-                  (click)="addAffectedGLEntry(debits)"
                 >
-                  <fa-icon icon="plus-circle" size="lg"></fa-icon>
+                </mifosx-gl-account-selector>
-                </button>
+                <mat-form-field class="flex-43">
-              </span>
+                  <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="amount"
+                    min="1"
+                    (input)="onAmountInput($event)"
+                  />
+                  @if (debits.at(i).controls.amount.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+                <span class="flex-fill">
+                  @if (i !== 0) {
+                    <button type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
+                      <fa-icon icon="minus-circle" size="lg"></fa-icon>
+                    </button>
+                  }
+                  @if (i === 0) {
+                    <button type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
+                      <fa-icon icon="plus-circle" size="lg"></fa-icon>
+                    </button>
+                  }
+                </span>
+              </div>
             </div>
-          </div>
+          }
 
-          <div
+          @for (credit of credits.controls; track credit; let i = $index) {
-            class="flex-fill layout-row-wrap responsive-column"
+            <div class="flex-fill layout-row-wrap responsive-column" formArrayName="credits">
-            formArrayName="credits"
+              <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-            *ngFor="let credit of credits.controls; let i = index"
+                <mifosx-gl-account-selector
-          >
+                  class="flex-48"
-            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+                  [inputFormControl]="credits.at(i).controls.glAccountId"
-              <mifosx-gl-account-selector
+                  [glAccountList]="glAccountData"
-                class="flex-48"
+                  [required]="true"
-                [inputFormControl]="credits.at(i).controls.glAccountId"
+                  [inputLabel]="'Affected GL Entry (Credit)'"
-                [glAccountList]="glAccountData"
-                [required]="true"
-                [inputLabel]="'Affected GL Entry (Credit)'"
-              >
-              </mifosx-gl-account-selector>
-
-              <mat-form-field class="flex-43">
-                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
-                <input
-                  type="number"
-                  matInput
-                  required
-                  formControlName="amount"
-                  min="1"
-                  (input)="onAmountInput($event)"
-                />
-                <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              </mat-form-field>
-
-              <span class="flex-fill">
-                <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
-                  <fa-icon icon="minus-circle" size="lg"></fa-icon>
-                </button>
-                <button
-                  *ngIf="i === 0"
-                  type="button"
-                  mat-icon-button
-                  color="primary"
-                  (click)="addAffectedGLEntry(credits)"
                 >
-                  <fa-icon icon="plus-circle" size="lg"></fa-icon>
+                </mifosx-gl-account-selector>
-                </button>
+                <mat-form-field class="flex-43">
-              </span>
+                  <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="amount"
+                    min="1"
+                    (input)="onAmountInput($event)"
+                  />
+                  @if (credits.at(i).controls.amount.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+                <span class="flex-fill">
+                  @if (i !== 0) {
+                    <button type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
+                      <fa-icon icon="minus-circle" size="lg"></fa-icon>
+                    </button>
+                  }
+                  @if (i === 0) {
+                    <button type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
+                      <fa-icon icon="plus-circle" size="lg"></fa-icon>
+                    </button>
+                  }
+                </span>
+              </div>
             </div>
-          </div>
+          }
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
@@ -147,18 +149,22 @@
             />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
-            <mat-error *ngIf="journalEntryForm.controls.transactionDate.hasError('required')">
+            @if (journalEntryForm.controls.transactionDate.hasError('required')) {
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
-              <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
+              @for (paymentType of paymentTypeData; track paymentType) {
-                {{ paymentType.name }}
+                <mat-option [value]="paymentType.id">
-              </mat-option>
+                  {{ paymentType.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/create-journal-entry/create-journal-entry.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray, UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -34,6 +34,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   onCreditAmountInput(event: any) {
     if (event.target.value < 1) {
       event.target.value = 1;
@@ -72,17 +82,7 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
     this.assetExternalizationEnabled = false;
     this.route.data.subscribe(
       (data: { offices: any; currencies: any; paymentTypes: any; glAccounts: any; globalConfig: any }) => {
@@ -147,7 +147,8 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
         '',
         [
           Validators.required,
-          Validators.min(1)]
+          Validators.min(1)
+        ]
       ]
     });
   }

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -6,15 +6,19 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
-              <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
+              @for (financialActivity of financialActivityData; track financialActivity) {
-                ({{ financialActivity.id }})
+                <mat-option [value]="financialActivity.id">
-                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                  ({{ financialActivity.id }})
-              </mat-option>
+                  {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
+            @if (financialActivityMappingForm.controls.financialActivityId.hasError('required')) {
-              {{ 'labels.inputs.Financial Activity' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Financial Activity' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mifosx-gl-account-selector

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -22,6 +22,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateFinancialActivityMappingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Financial activity mapping form. */
   financialActivityMappingForm: UntypedFormGroup;
   /** GL Account options. */
@@ -38,12 +43,7 @@ export class CreateFinancialActivityMappingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { financialActivityAccountsTemplate: any }) => {
       this.glAccountOptions = data.financialActivityAccountsTemplate.glAccountOptions;
       this.financialActivityData = data.financialActivityAccountsTemplate.financialActivityOptions;

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/financial-activity-mappings-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class FinancialActivityMappingsTemplateResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the financial activity mappings template data.

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
-              <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
+              @for (financialActivity of financialActivityData; track financialActivity) {
-                ({{ financialActivity.id }})
+                <mat-option [value]="financialActivity.id">
-                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                  ({{ financialActivity.id }})
-              </mat-option>
+                  {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -22,6 +22,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditFinancialActivityMappingComponent implements OnInit {
+  private formBuider = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Financial activity mapping form. */
   financialActivityMappingForm: UntypedFormGroup;
   /** GL Account options. */
@@ -44,12 +49,7 @@ export class EditFinancialActivityMappingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuider: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { financialActivityAccountAndTemplate: any }) => {
       this.financialActivityAccountId = data.financialActivityAccountAndTemplate.id;
       this.financialActivityId = data.financialActivityAccountAndTemplate.financialActivityData.id;

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/financial-activity-mapping-and-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class FinancialActivityMappingAndTemplateResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the financial activity mapping and template data.

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -49,6 +49,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FinancialActivityMappingsComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Financial activity account data. */
   financialActivityAccountData: any;
   /** Columns to be displayed in financial activity mappings table. */
@@ -82,12 +87,7 @@ export class FinancialActivityMappingsComponent implements OnInit, AfterViewInit
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
+  constructor() {
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
     this.route.data.subscribe((data: { financialActivityAccounts: any }) => {
       this.financialActivityAccountData = data.financialActivityAccounts;
     });

src/app/accounting/financial-activity-mappings/financial-activity-mappings.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class FinancialActivityMappingsResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the financial activity mappings data.

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/financial-activity-mapping.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class FinancialActivityMappingResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the financial activity mapping data.

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewFinancialActivityMappingComponent {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private location = inject(Location);
+
   /** Financial activity account ID. */
   financialActivityAccountId: any;
   /** Financial activity account data. */
@@ -39,13 +45,7 @@ export class ViewFinancialActivityMappingComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private location: Location
-  ) {
     this.route.data.subscribe((data: { financialActivityAccount: any }) => {
       this.financialActivityAccount = data.financialActivityAccount;
       this.financialActivityAccountId = data.financialActivityAccount.id;

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -6,136 +6,145 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
+              @for (office of officeData; track office) {
-                {{ office.name }}
+                <mat-option [value]="office.id">
-              </mat-option>
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
+            @if (frequentPostingsForm.controls.officeId.hasError('required')) {
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule' | translate }}</mat-label>
             <mat-select required formControlName="accountingRule">
-              <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
+              @for (accountingRule of accountingRuleData; track accountingRule) {
-                {{ accountingRule.name }}
+                <mat-option [value]="accountingRule">
-              </mat-option>
+                  {{ accountingRule.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
+            @if (frequentPostingsForm.controls.accountingRule.hasError('required')) {
-              {{ 'labels.inputs.Accounting Rule' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Accounting Rule' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
-              <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+              @for (currency of currencyData; track currency) {
-                {{ currency.displayLabel }}
+                <mat-option [value]="currency.code">
-              </mat-option>
+                  {{ currency.displayLabel }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
+            @if (frequentPostingsForm.controls.currencyCode.hasError('required')) {
-              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <span class="flex-48 hide-lt-md"></span>
 
-          <div
+          @for (debit of debits.controls; track debit; let i = $index) {
-            class="flex-fill layout-row-wrap responsive-column"
+            <div class="flex-fill layout-row-wrap responsive-column" formArrayName="debits">
-            formArrayName="debits"
+              <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-            *ngFor="let debit of debits.controls; let i = index"
+                <mat-form-field class="flex-48">
-          >
+                  <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
-            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+                  <mat-select required formControlName="glAccountId">
-              <mat-form-field class="flex-48">
+                    @for (affectedGLEntryDebit of debitAccountData; track affectedGLEntryDebit) {
-                <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
+                      <mat-option [value]="affectedGLEntryDebit.id">
-                <mat-select required formControlName="glAccountId">
+                        {{ affectedGLEntryDebit.name }}
-                  <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
+                      </mat-option>
-                    {{ affectedGLEntryDebit.name }}
+                    }
-                  </mat-option>
+                  </mat-select>
-                </mat-select>
+                  @if (debits.at(i).controls.glAccountId.hasError('required')) {
-                <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
+                    <mat-error>
-                  {{ 'labels.inputs.Affected GL Entry (Debit)' | translate }} {{ 'labels.commons.is' | translate }}
+                      {{ 'labels.inputs.Affected GL Entry (Debit)' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
+                    </mat-error>
-              </mat-form-field>
+                  }
-
+                </mat-form-field>
-              <mat-form-field class="flex-43">
+                <mat-form-field class="flex-43">
-                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
+                  <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
-                <input type="number" matInput required formControlName="amount" />
+                  <input type="number" matInput required formControlName="amount" />
-                <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
+                  @if (debits.at(i).controls.amount.hasError('required')) {
-                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    <mat-error>
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                </mat-error>
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-form-field>
+                    </mat-error>
-
+                  }
-              <span class="flex-fill">
+                </mat-form-field>
-                <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
+                <span class="flex-fill">
-                  <fa-icon icon="minus-circle" size="lg"></fa-icon>
+                  @if (i !== 0) {
-                </button>
+                    <button type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
-                <button
+                      <fa-icon icon="minus-circle" size="lg"></fa-icon>
-                  *ngIf="i === 0 && allowMultipleDebitEntries"
+                    </button>
-                  type="button"
+                  }
-                  mat-icon-button
+                  @if (i === 0 && allowMultipleDebitEntries) {
-                  color="primary"
+                    <button type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
-                  (click)="addAffectedGLEntry(debits)"
+                      <fa-icon icon="plus-circle" size="lg"></fa-icon>
-                >
+                    </button>
-                  <fa-icon icon="plus-circle" size="lg"></fa-icon>
+                  }
-                </button>
+                </span>
-              </span>
+              </div>
             </div>
-          </div>
+          }
 
-          <div
+          @for (credit of credits.controls; track credit; let i = $index) {
-            class="flex-fill layout-row-wrap responsive-column"
+            <div class="flex-fill layout-row-wrap responsive-column" formArrayName="credits">
-            formArrayName="credits"
+              <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-            *ngFor="let credit of credits.controls; let i = index"
+                <mat-form-field class="flex-48">
-          >
+                  <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
-            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+                  <mat-select required formControlName="glAccountId">
-              <mat-form-field class="flex-48">
+                    @for (affectedGLEntryCredit of creditAccountData; track affectedGLEntryCredit) {
-                <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
+                      <mat-option [value]="affectedGLEntryCredit.id">
-                <mat-select required formControlName="glAccountId">
+                        {{ affectedGLEntryCredit.name }}
-                  <mat-option
+                      </mat-option>
-                    *ngFor="let affectedGLEntryCredit of creditAccountData"
+                    }
-                    [value]="affectedGLEntryCredit.id"
+                  </mat-select>
-                  >
+                  @if (credits.at(i).controls.glAccountId.hasError('required')) {
-                    {{ affectedGLEntryCredit.name }}
+                    <mat-error>
-                  </mat-option>
+                      {{ 'labels.inputs.Affected GL Entry (Credit)' | translate }} {{ 'labels.commons.is' | translate }}
-                </mat-select>
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
-                <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
+                    </mat-error>
-                  {{ 'labels.inputs.Affected GL Entry (Credit)' | translate }} {{ 'labels.commons.is' | translate }}
+                  }
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-form-field>
-                </mat-error>
+                <mat-form-field class="flex-43">
-              </mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
-
+                  <input type="number" matInput required formControlName="amount" />
-              <mat-form-field class="flex-43">
+                  @if (credits.at(i).controls.amount.hasError('required')) {
-                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
+                    <mat-error>
-                <input type="number" matInput required formControlName="amount" />
+                      {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
-                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    </mat-error>
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  }
-                </mat-error>
+                </mat-form-field>
-              </mat-form-field>
+                <span class="flex-fill">
-
+                  @if (i !== 0) {
-              <span class="flex-fill">
+                    <button type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
-                <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
+                      <fa-icon icon="minus-circle" size="lg"></fa-icon>
-                  <fa-icon icon="minus-circle" size="lg"></fa-icon>
+                    </button>
-                </button>
+                  }
-                <button
+                  @if (i === 0 && allowMultipleCreditEntries) {
-                  *ngIf="i === 0 && allowMultipleCreditEntries"
+                    <button type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
-                  type="button"
+                      <fa-icon icon="plus-circle" size="lg"></fa-icon>
-                  mat-icon-button
+                    </button>
-                  color="primary"
+                  }
-                  (click)="addAffectedGLEntry(credits)"
+                </span>
-                >
+              </div>
-                  <fa-icon icon="plus-circle" size="lg"></fa-icon>
-                </button>
-              </span>
             </div>
-          </div>
+          }
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
@@ -154,18 +163,22 @@
             />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
-            <mat-error *ngIf="frequentPostingsForm.controls.transactionDate.hasError('required')">
+            @if (frequentPostingsForm.controls.transactionDate.hasError('required')) {
-              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
-              <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
+              @for (paymentType of paymentTypeData; track paymentType) {
-                {{ paymentType.name }}
+                <mat-option [value]="paymentType.id">
-              </mat-option>
+                  {{ paymentType.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 

src/app/accounting/frequent-postings/frequent-postings.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -32,6 +32,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FrequentPostingsComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum transaction date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum transaction date allowed. */
@@ -63,14 +70,7 @@ export class FrequentPostingsComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { offices: any; accountingRules: any; currencies: any; paymentTypes: any }) => {
       this.officeData = data.offices;
       this.accountingRuleData = data.accountingRules;

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -8,14 +8,18 @@
             <mat-form-field class="flex-96">
               <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
-                <mat-option *ngFor="let office of officeData" [value]="office.id">
+                @for (office of officeData; track office) {
-                  {{ office.name }}
+                  <mat-option [value]="office.id">
-                </mat-option>
+                    {{ office.name }}
+                  </mat-option>
+                }
               </mat-select>
-              <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
+              @if (openingBalancesForm.controls.officeId.hasError('required')) {
-                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <mat-error>
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              </mat-error>
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
             </mat-form-field>
           </div>
 
@@ -26,125 +30,121 @@
           </div>
         </div>
 
-        <div class="layout-row-wrap gap-2percent responsive-column" *ngIf="openingBalancesData">
+        @if (openingBalancesData) {
-          <mifosx-gl-account-display
+          <div class="layout-row-wrap gap-2percent responsive-column">
-            class="flex-100"
+            <mifosx-gl-account-display
-            [accountTitle]="'Opening Balances Contra Account'"
+              class="flex-100"
-            [glAccount]="openingBalancesData.contraAccount"
+              [accountTitle]="'Opening Balances Contra Account'"
-            [withTitle]="'50%'"
+              [glAccount]="openingBalancesData.contraAccount"
-          >
+              [withTitle]="'50%'"
-          </mifosx-gl-account-display>
+            >
-
+            </mifosx-gl-account-display>
-          <mat-form-field class="flex-48">
+            <mat-form-field class="flex-48">
-            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
-            <mat-select required formControlName="currencyCode">
+              <mat-select required formControlName="currencyCode">
-              <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+                @for (currency of currencyData; track currency) {
-                {{ currency.displayLabel }}
+                  <mat-option [value]="currency.code">
-              </mat-option>
+                    {{ currency.displayLabel }}
-            </mat-select>
+                  </mat-option>
-            <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
+                }
-              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              </mat-select>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              @if (openingBalancesForm.controls.currencyCode.hasError('required')) {
-            </mat-error>
+                <mat-error>
-          </mat-form-field>
+                  {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-          <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
+                </mat-error>
-            <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
+              }
-            <input
+            </mat-form-field>
-              matInput
+            <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
-              [min]="minDate"
+              <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
-              [max]="maxDate"
+              <input
-              [matDatepicker]="openingBalancesDatePicker"
+                matInput
-              required
+                [min]="minDate"
-              formControlName="transactionDate"
+                [max]="maxDate"
-            />
+                [matDatepicker]="openingBalancesDatePicker"
-            <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
+                required
-            <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
+                formControlName="transactionDate"
-            <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
+              />
-              {{ 'labels.inputs.Opening Balances Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+              <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
-            </mat-error>
+              @if (openingBalancesForm.controls.transactionDate.hasError('required')) {
-          </mat-form-field>
+                <mat-error>
-
+                  {{ 'labels.inputs.Opening Balances Date' | translate }} {{ 'labels.commons.is' | translate }}
-          <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-            <div class="header flex-8">
+                </mat-error>
-              {{ 'labels.inputs.Type' | translate }}
+              }
-            </div>
+            </mat-form-field>
-
+            <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
-            <div class="header flex-18">
+              <div class="header flex-8">
-              {{ 'labels.inputs.GL Code' | translate }}
+                {{ 'labels.inputs.Type' | translate }}
-            </div>
+              </div>
-
+              <div class="header flex-18">
-            <div class="header flex-18">
+                {{ 'labels.inputs.GL Code' | translate }}
-              {{ 'labels.inputs.GL Name' | translate }}
+              </div>
-              {{ 'labels.inputs.Account' | translate }}
+              <div class="header flex-18">
-            </div>
+                {{ 'labels.inputs.GL Name' | translate }}
-
+                {{ 'labels.inputs.Account' | translate }}
-            <div class="header r-amount flex-18">
+              </div>
-              {{ 'labels.inputs.Total Debit' | translate }}:
+              <div class="header r-amount flex-18">
-              {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+                {{ 'labels.inputs.Total Debit' | translate }}:
-            </div>
+                {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
-
+              </div>
-            <div class="header r-amount flex-23">
+              <div class="header r-amount flex-23">
-              {{ 'labels.inputs.Total Credit' | translate }}:
+                {{ 'labels.inputs.Total Credit' | translate }}:
-              {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+                {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+              </div>
             </div>
+            @for (credit of glAccountEntries.controls; track credit; let i = $index) {
+              <div class="flex-fill layout-row-wrap responsive-column content" formArrayName="glAccountEntries">
+                <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+                  <div class="flex-8">
+                    {{
+                      openingBalancesData.glAccounts[i].glAccountType.value !==
+                      openingBalancesData.glAccounts[i - 1]?.glAccountType.value
+                        ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
+                        : ''
+                    }}
+                  </div>
+                  <div class="flex-13">
+                    {{ openingBalancesData.glAccounts[i].glAccountCode }}
+                  </div>
+                  <div class="flex-29">
+                    {{ openingBalancesData.glAccounts[i].glAccountName }}
+                  </div>
+                  <div class="flex-20">
+                    <mat-form-field>
+                      <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
+                      <input matInput type="number" formControlName="debit" />
+                    </mat-form-field>
+                  </div>
+                  <div class="flex-20">
+                    <mat-form-field>
+                      <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
+                      <input matInput type="number" formControlName="credit" />
+                    </mat-form-field>
+                  </div>
+                </div>
+              </div>
+            }
           </div>
-
+        }
-          <div
-            class="flex-fill layout-row-wrap responsive-column content"
-            formArrayName="glAccountEntries"
-            *ngFor="let credit of glAccountEntries.controls; let i = index"
-          >
-            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-              <div class="flex-8">
-                {{
-                  openingBalancesData.glAccounts[i].glAccountType.value !==
-                  openingBalancesData.glAccounts[i - 1]?.glAccountType.value
-                    ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
-                    : ''
-                }}
-              </div>
-
-              <div class="flex-13">
-                {{ openingBalancesData.glAccounts[i].glAccountCode }}
-              </div>
-
-              <div class="flex-29">
-                {{ openingBalancesData.glAccounts[i].glAccountName }}
-              </div>
-
-              <div class="flex-20">
-                <mat-form-field>
-                  <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
-                  <input matInput type="number" formControlName="debit" />
-                </mat-form-field>
-              </div>
-
-              <div class="flex-20">
-                <mat-form-field>
-                  <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
-                  <input matInput type="number" formControlName="credit" />
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-        </div>
       </mat-card-content>
 
-      <mat-card-actions class="layout-row gap-5px align-center responsive-column" *ngIf="openingBalancesData">
+      @if (openingBalancesData) {
-        <button type="button" mat-raised-button [routerLink]="['../']">
+        <mat-card-actions class="layout-row gap-5px align-center responsive-column">
-          {{ 'labels.buttons.Cancel' | translate }}
+          <button type="button" mat-raised-button [routerLink]="['../']">
-        </button>
+            {{ 'labels.buttons.Cancel' | translate }}
-        <button
+          </button>
-          mat-raised-button
+          <button
-          color="primary"
+            mat-raised-button
-          [disabled]="!openingBalancesForm.valid"
+            color="primary"
-          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
+            [disabled]="!openingBalancesForm.valid"
-        >
+            *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
-          {{ 'labels.buttons.Submit' | translate }}
+          >
-        </button>
+            {{ 'labels.buttons.Submit' | translate }}
-      </mat-card-actions>
+          </button>
+        </mat-card-actions>
+      }
     </form>
   </mat-card>
 </div>

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -19,7 +19,7 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 import { onlyOneOfTheFieldsIsRequiredValidator } from './only-one-of-the-fields-is-required.validator';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
-import { NgFor, NgIf, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { GlAccountDisplayComponent } from '../../shared/accounting/gl-account-display/gl-account-display.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -37,6 +37,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  private translateService = inject(TranslateService);
+
   /** Minimum opening balances date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum opening balances date allowed. */
@@ -70,17 +80,7 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
+  constructor() {
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    private translateService: TranslateService
-  ) {
     this.route.data.subscribe((data: { offices: any; currencies: any }) => {
       this.officeData = data.offices;
       this.currencyData = data.currencies.selectedCurrencyOptions;

src/app/accounting/periodic-accruals/periodic-accruals.component.html

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

src/app/accounting/periodic-accruals/periodic-accruals.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 { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class PeriodicAccrualsComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum accrue date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum accrue date allowed. */
@@ -29,22 +36,6 @@ export class PeriodicAccrualsComponent implements OnInit {
   /** Periodic accruals form. */
   periodicAccrualsForm: UntypedFormGroup;
 
-  /**
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {AccountingService} accountingService Accounting Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
   /**
    * Creates periodic accruals form.
    */

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -15,10 +15,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
-            <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
+            @if (provisioningEntryForm.controls.date.hasError('required')) {
-              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <mat-error>
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
+                {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
-            </mat-error>
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="flex-fill">

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.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';
 
@@ -22,6 +22,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateProvisioningEntryComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Minimum provisioning date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum provisioning date allowed. */
@@ -29,22 +36,6 @@ export class CreateProvisioningEntryComponent implements OnInit {
   /** Provisioning entry form. */
   provisioningEntryForm: UntypedFormGroup;
 
-  /**
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {AccountingService} accountingService Accounting Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
   /**
    * Creates the provisioning entry form.
    */

src/app/accounting/provisioning-entries/provisioning-entries.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -50,6 +50,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ProvisioningEntriesComponent implements OnInit {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Provisioning entry data. */
   provisioningEntryData: any;
   /** Columns to be displayed in provisioning entries table. */
@@ -75,11 +79,7 @@ export class ProvisioningEntriesComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe((data: { provisioningEntries: any }) => {
       this.provisioningEntryData = data.provisioningEntries.pageItems;
     });

src/app/accounting/provisioning-entries/provisioning-entries.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntriesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the provisioning entries data.

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry-entries.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntryEntriesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the provisioning entry entries data.

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningEntryResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the provisioning entry data.

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -1,46 +1,43 @@
-<div class="container" *ngIf="provisioningEntry">
+@if (provisioningEntry) {
-  <div class="m-b-20 layout-row align-end gap-20px">
+  <div class="container">
-    <button
+    <div class="m-b-20 layout-row align-end gap-20px">
-      mat-raised-button
+      <button
-      color="primary"
+        mat-raised-button
-      (click)="createProvisioningJournalEntries()"
+        color="primary"
-      [disabled]="provisioningEntry.journalEntry"
+        (click)="createProvisioningJournalEntries()"
-      *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
+        [disabled]="provisioningEntry.journalEntry"
-    >
+        *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      >
-      {{ 'labels.buttons.Create Journal Entries' | translate }}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    </button>
+        {{ 'labels.buttons.Create Journal Entries' | translate }}
+      </button>
+    </div>
+    <mat-card>
+      <mat-card-content>
+        <div class="layout-row-wrap responsive-column content">
+          <div class="flex-16 header">
+            {{ 'labels.inputs.Created By' | translate }}
+          </div>
+          <div class="flex-16">
+            {{ provisioningEntry.createdUser }}
+          </div>
+          <div class="flex-16 header">
+            {{ 'labels.inputs.Created On' | translate }}
+          </div>
+          <div class="flex-16">
+            {{ provisioningEntry.createdDate }}
+          </div>
+          <div class="flex-18 header">
+            {{ 'labels.inputs.Amount to be Reserved' | translate }}
+          </div>
+          <div class="flex-18">
+            {{ provisioningEntry.reservedAmount }}
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
   </div>
-
+}
-  <mat-card>
-    <mat-card-content>
-      <div class="layout-row-wrap responsive-column content">
-        <div class="flex-16 header">
-          {{ 'labels.inputs.Created By' | translate }}
-        </div>
-        <div class="flex-16">
-          {{ provisioningEntry.createdUser }}
-        </div>
-
-        <div class="flex-16 header">
-          {{ 'labels.inputs.Created On' | translate }}
-        </div>
-
-        <div class="flex-16">
-          {{ provisioningEntry.createdDate }}
-        </div>
-
-        <div class="flex-18 header">
-          {{ 'labels.inputs.Amount to be Reserved' | translate }}
-        </div>
-
-        <div class="flex-18">
-          {{ provisioningEntry.reservedAmount }}
-        </div>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
 
 <!-- Search -->
 <div class="container m-t-20 layout-row-wrap responsive-column gap-2percent">
@@ -62,24 +59,27 @@
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let office of filteredOfficeData | async" [value]="office.name">
+  @for (office of filteredOfficeData | async; track office) {
-    {{ office.name }}
+    <mat-option [value]="office.name">
-  </mat-option>
+      {{ office.name }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #loanProductAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let loanProduct of filteredLoanProductData | async" [value]="loanProduct.name">
+  @for (loanProduct of filteredLoanProductData | async; track loanProduct) {
-    {{ loanProduct.name }}
+    <mat-option [value]="loanProduct.name">
-  </mat-option>
+      {{ loanProduct.name }}
+    </mat-option>
+  }
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #provisioningCategoryAutocomplete="matAutocomplete">
-  <mat-option
+  @for (provisioningCategory of filteredProvisioningCategoryData | async; track provisioningCategory) {
-    *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async"
+    <mat-option [value]="provisioningCategory.categoryName">
-    [value]="provisioningCategory.categoryName"
+      {{ provisioningCategory.categoryName }}
-  >
+    </mat-option>
-    {{ provisioningCategory.categoryName }}
+  }
-  </mat-option>
 </mat-autocomplete>
 
 <!--Table -->

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
@@ -23,7 +23,7 @@ import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/op
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -57,6 +57,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Provisioning entry id. */
   provisioningEntryId: string;
   /** Provisioning entry. */
@@ -112,11 +116,7 @@ export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
+  constructor() {
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
     this.route.data.subscribe(
       (data: {
         provisioningEntry: any;

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/provisioning-journal-entries.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { AccountingService } from '../../accounting.service';
  */
 @Injectable()
 export class ProvisioningJournalEntriesResolver {
-  /**
+  private accountingService = inject(AccountingService);
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
 
   /**
    * Returns the provisioning journal entries data.