Upgrading to Angular 20:

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

src/app/organization/adhoc-query/adhoc-query-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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class AdhocQueryTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the adhoc query template data.

src/app/organization/adhoc-query/adhoc-query.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,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AdhocQueryComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Adhoc Queries data. */
   adhocQueriesData: any;
   /** Columns to be displayed in adhoc queries table. */
@@ -74,7 +76,7 @@ export class AdhocQueryComponent implements OnInit {
    * Retrieves the adhoc queries data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { adhocQueries: any }) => {
       this.adhocQueriesData = data.adhocQueries;
     });

src/app/organization/adhoc-query/common-resolvers/adhoc-queries.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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class AdhocQueriesResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the adhoc queries data.

src/app/organization/adhoc-query/common-resolvers/adhoc-query-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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class AdhocQueryAndTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the adhoc query and template data.

src/app/organization/adhoc-query/common-resolvers/adhoc-query.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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class AdhocQueryResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the adhoc query data.

src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html

@@ -6,69 +6,87 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="adhocQueryForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (adhocQueryForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
-            <mat-error *ngIf="adhocQueryForm.controls.query.hasError('required')">
-              {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (adhocQueryForm.controls.query.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName" />
-            <mat-error *ngIf="adhocQueryForm.controls.tableName.hasError('required')">
-              {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (adhocQueryForm.controls.tableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
-            <mat-error *ngIf="adhocQueryForm.controls.tableFields.hasError('required')">
-              {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (adhocQueryForm.controls.tableFields.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email" />
-            <mat-error *ngIf="adhocQueryForm.controls.email.hasError('email')">
-              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
-            </mat-error>
+            @if (adhocQueryForm.controls.email.hasError('email')) {
+              <mat-error>
+                {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.invalid' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
-              <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
-                {{ reportRunFrequency.value }}
-              </mat-option>
+              @for (reportRunFrequency of reportRunFrequencyData; track reportRunFrequency) {
+                <mat-option [value]="reportRunFrequency.id">
+                  {{ reportRunFrequency.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field *ngIf="adhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="reportRunEvery" />
-            <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('required')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('min')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
-              <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (adhocQueryForm.controls.reportRunFrequency.value === 5) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
+              <input type="number" matInput required formControlName="reportRunEvery" />
+              @if (adhocQueryForm.controls.reportRunEvery.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+              @if (adhocQueryForm.controls.reportRunEvery.hasError('min')) {
+                <mat-error>
+                  {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
+                  <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
             {{ 'labels.inputs.Active' | translate }}

src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -27,6 +27,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateAdhocQueryComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Adhoc Query form. */
   adhocQueryForm: UntypedFormGroup;
   /** Adhoc Query template data. */
@@ -41,12 +46,7 @@ export class CreateAdhocQueryComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { adhocQueryTemplate: any }) => {
       this.adhocQueryTemplateData = data.adhocQueryTemplate;
     });
@@ -101,7 +101,8 @@ export class CreateAdhocQueryComponent implements OnInit {
           'reportRunEvery',
           new UntypedFormControl('', [
             Validators.required,
-            Validators.min(1)])
+            Validators.min(1)
+          ])
         );
       } else {
         this.adhocQueryForm.removeControl('reportRunEvery');

src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html

@@ -6,69 +6,87 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="editAdhocQueryForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editAdhocQueryForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
-            <mat-error *ngIf="editAdhocQueryForm.controls.query.hasError('required')">
-              {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editAdhocQueryForm.controls.query.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName" />
-            <mat-error *ngIf="editAdhocQueryForm.controls.tableName.hasError('required')">
-              {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editAdhocQueryForm.controls.tableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
-            <mat-error *ngIf="editAdhocQueryForm.controls.tableFields.hasError('required')">
-              {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editAdhocQueryForm.controls.tableFields.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email" />
-            <mat-error *ngIf="editAdhocQueryForm.controls.email.hasError('email')">
-              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
-            </mat-error>
+            @if (editAdhocQueryForm.controls.email.hasError('email')) {
+              <mat-error>
+                {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.invalid' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
-              <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
-                {{ reportRunFrequency.value }}
-              </mat-option>
+              @for (reportRunFrequency of reportRunFrequencyData; track reportRunFrequency) {
+                <mat-option [value]="reportRunFrequency.id">
+                  {{ reportRunFrequency.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field *ngIf="editAdhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="reportRunEvery" />
-            <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('required')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('min')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
-              <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (editAdhocQueryForm.controls.reportRunFrequency.value === 5) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
+              <input type="number" matInput required formControlName="reportRunEvery" />
+              @if (editAdhocQueryForm.controls.reportRunEvery.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+              @if (editAdhocQueryForm.controls.reportRunEvery.hasError('min')) {
+                <mat-error>
+                  {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
+                  <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
             {{ 'labels.inputs.Active' | translate }}

src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -27,6 +27,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditAdhocQueryComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Edit Adhoc Query form. */
   editAdhocQueryForm: UntypedFormGroup;
   /** Adhoc Query template data. */
@@ -41,12 +46,7 @@ export class EditAdhocQueryComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { adhocQueryAndTemplate: any }) => {
       this.adhocQueryTemplateData = data.adhocQueryAndTemplate;
     });
@@ -101,7 +101,8 @@ export class EditAdhocQueryComponent implements OnInit {
           'reportRunEvery',
           new UntypedFormControl('', [
             Validators.required,
-            Validators.min(1)])
+            Validators.min(1)
+          ])
         );
         this.editAdhocQueryForm.get('reportRunEvery').patchValue(this.adhocQueryTemplateData.reportRunEvery);
       } else {

src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html

@@ -37,13 +37,17 @@
           {{ adhocQueryData.tableName }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="adhocQueryData.reportRunFrequency">
-          {{ 'labels.inputs.Report Run Frequency' | translate }}
-        </div>
+        @if (adhocQueryData.reportRunFrequency) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Report Run Frequency' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="adhocQueryData.reportRunFrequency">
-          {{ reportRunFrequency }}
-        </div>
+        @if (adhocQueryData.reportRunFrequency) {
+          <div class="flex-50">
+            {{ reportRunFrequency }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Status' | translate }}

src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.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 ViewAdhocQueryComponent {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+
   /** Adhoc query data. */
   adhocQueryData: any;
 
@@ -34,12 +39,7 @@ export class ViewAdhocQueryComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { adhocQuery: any }) => {
       this.adhocQueryData = data.adhocQuery;
     });

src/app/organization/bulk-import/bulk-import.component.html

@@ -9,11 +9,17 @@
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Offices']">{{ 'labels.heading.Offices' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['Offices']">
-              {{ 'labels.text.Download, Upload Offices Template' | translate }}
-            </p>
+            @if (!arrowBooleans[0]) {
+              <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[0]) {
+              <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[0]) {
+              <p matLine [routerLink]="['Offices']">
+                {{ 'labels.text.Download, Upload Offices Template' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -21,11 +27,17 @@
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Users']">{{ 'labels.heading.Users' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['Users']">
-              {{ 'labels.text.Download offices template and Upload office excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[1]) {
+              <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[1]) {
+              <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[1]) {
+              <p matLine [routerLink]="['Users']">
+                {{ 'labels.text.Download offices template and Upload office excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -33,11 +45,17 @@
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Groups']">{{ 'labels.heading.Groups' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['Groups']">
-              {{ 'labels.text.Download groups template and Upload group excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[2]) {
+              <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[2]) {
+              <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[2]) {
+              <p matLine [routerLink]="['Groups']">
+                {{ 'labels.text.Download groups template and Upload group excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -45,11 +63,17 @@
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Loan Accounts']">{{ 'labels.heading.Loan Accounts' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['Loan Accounts']">
-              {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[3]) {
+              <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[3]) {
+              <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[3]) {
+              <p matLine [routerLink]="['Loan Accounts']">
+                {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -57,11 +81,19 @@
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Savings Accounts']">{{ 'labels.heading.Savings Accounts' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['Savings Accounts']">
-              {{ 'labels.text.Download savings accounts template and upload savings account excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[4]) {
+              <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[4]) {
+              <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[4]) {
+              <p matLine [routerLink]="['Savings Accounts']">
+                {{
+                  'labels.text.Download savings accounts template and upload savings account excel files' | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -71,14 +103,20 @@
             <h4 matLine [routerLink]="['Fixed Deposit Accounts']">
               {{ 'labels.heading.Fixed Deposit Accounts' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['Fixed Deposit Accounts']">
-              {{
-                'labels.text.Download fixed deposit accounts template and upload fixed deposit account excel files'
-                  | translate
-              }}
-            </p>
+            @if (!arrowBooleans[5]) {
+              <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[5]) {
+              <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[5]) {
+              <p matLine [routerLink]="['Fixed Deposit Accounts']">
+                {{
+                  'labels.text.Download fixed deposit accounts template and upload fixed deposit account excel files'
+                    | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -86,13 +124,19 @@
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Chart of Accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['Chart of Accounts']">
-              {{
-                'labels.text.Download chart of accounts template and upload chart of account excel files' | translate
-              }}
-            </p>
+            @if (!arrowBooleans[6]) {
+              <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[6]) {
+              <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[6]) {
+              <p matLine [routerLink]="['Chart of Accounts']">
+                {{
+                  'labels.text.Download chart of accounts template and upload chart of account excel files' | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -100,11 +144,17 @@
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Share Accounts']">{{ 'labels.heading.Share Accounts' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['Share Accounts']">
-              {{ 'labels.text.Download share accounts template and upload share account excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[7]) {
+              <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[7]) {
+              <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[7]) {
+              <p matLine [routerLink]="['Share Accounts']">
+                {{ 'labels.text.Download share accounts template and upload share account excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
         </mat-nav-list>
       </div>
@@ -116,11 +166,17 @@
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Employees']">{{ 'labels.heading.Employees' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['Employees']">
-              {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[8]) {
+              <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[8]) {
+              <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[8]) {
+              <p matLine [routerLink]="['Employees']">
+                {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -128,11 +184,17 @@
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Clients']">{{ 'labels.heading.Clients' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['Clients']">
-              {{ 'labels.text.Download clients template and upload clients excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[9]) {
+              <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[9]) {
+              <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[9]) {
+              <p matLine [routerLink]="['Clients']">
+                {{ 'labels.text.Download clients template and upload clients excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -140,11 +202,17 @@
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Centers']">{{ 'labels.heading.Centers' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['Centers']">
-              {{ 'labels.text.Download centers template and upload centers excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[10]) {
+              <fa-icon (click)="arrowBooleansToggle(10)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[10]) {
+              <fa-icon (click)="arrowBooleansToggle(10)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[10]) {
+              <p matLine [routerLink]="['Centers']">
+                {{ 'labels.text.Download centers template and upload centers excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -152,11 +220,17 @@
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Loan Repayments']">{{ 'labels.heading.Loan Repayments' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['Loan Repayments']">
-              {{ 'labels.text.Download loan repayments template and upload loan repayment excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[11]) {
+              <fa-icon (click)="arrowBooleansToggle(11)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[11]) {
+              <fa-icon (click)="arrowBooleansToggle(11)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[11]) {
+              <p matLine [routerLink]="['Loan Repayments']">
+                {{ 'labels.text.Download loan repayments template and upload loan repayment excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -166,14 +240,20 @@
             <h4 matLine [routerLink]="['Savings Transactions']">
               {{ 'labels.heading.Savings Transactions' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['Savings Transactions']">
-              {{
-                'labels.text.Download savings transactions template and upload savings transaction excel files'
-                  | translate
-              }}
-            </p>
+            @if (!arrowBooleans[12]) {
+              <fa-icon (click)="arrowBooleansToggle(12)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[12]) {
+              <fa-icon (click)="arrowBooleansToggle(12)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[12]) {
+              <p matLine [routerLink]="['Savings Transactions']">
+                {{
+                  'labels.text.Download savings transactions template and upload savings transaction excel files'
+                    | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -183,14 +263,20 @@
             <h4 matLine [routerLink]="['Fixed Deposit Transactions']">
               {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['Fixed Deposit Transactions']">
-              {{
-                'labels.text.Download fixed deposit transactions template and upload fixed deposit transaction excel files'
-                  | translate
-              }}
-            </p>
+            @if (!arrowBooleans[13]) {
+              <fa-icon (click)="arrowBooleansToggle(13)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[13]) {
+              <fa-icon (click)="arrowBooleansToggle(13)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[13]) {
+              <p matLine [routerLink]="['Fixed Deposit Transactions']">
+                {{
+                  'labels.text.Download fixed deposit transactions template and upload fixed deposit transaction excel files'
+                    | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -200,14 +286,20 @@
             <h4 matLine [routerLink]="['Recurring Deposit Transactions']">
               {{ 'labels.heading.Recurring Deposit Transactions' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['Recurring Deposit Transactions']">
-              {{
-                'labels.text.Download recurring deposit transactions template and upload recurring deposit transaction excel files'
-                  | translate
-              }}
-            </p>
+            @if (!arrowBooleans[14]) {
+              <fa-icon (click)="arrowBooleansToggle(14)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[14]) {
+              <fa-icon (click)="arrowBooleansToggle(14)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[14]) {
+              <p matLine [routerLink]="['Recurring Deposit Transactions']">
+                {{
+                  'labels.text.Download recurring deposit transactions template and upload recurring deposit transaction excel files'
+                    | translate
+                }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -215,11 +307,17 @@
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Journal Entries']">{{ 'labels.heading.Journal Entries' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="!arrowBooleans[15]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="arrowBooleans[15]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['Journal Entries']">
-              {{ 'labels.text.Download journal entries template and upload journal entries excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[15]) {
+              <fa-icon (click)="arrowBooleansToggle(15)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[15]) {
+              <fa-icon (click)="arrowBooleansToggle(15)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[15]) {
+              <p matLine [routerLink]="['Journal Entries']">
+                {{ 'labels.text.Download journal entries template and upload journal entries excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
@@ -227,11 +325,17 @@
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['Guarantors']">{{ 'labels.heading.Guarantors' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="!arrowBooleans[16]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="arrowBooleans[16]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['Guarantors']">
-              {{ 'labels.text.Download guarantors template and upload guarantor excel files' | translate }}
-            </p>
+            @if (!arrowBooleans[16]) {
+              <fa-icon (click)="arrowBooleansToggle(16)" icon="arrow-down" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[16]) {
+              <fa-icon (click)="arrowBooleansToggle(16)" icon="arrow-up" size="md"></fa-icon>
+            }
+            @if (arrowBooleans[16]) {
+              <p matLine [routerLink]="['Guarantors']">
+                {{ 'labels.text.Download guarantors template and upload guarantor excel files' | translate }}
+              </p>
+            }
           </mat-list-item>
         </mat-nav-list>
       </div>

src/app/organization/bulk-import/bulk-import.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 */
@@ -16,12 +16,9 @@ import { BulkImports } from './view-bulk-import/bulk-imports';
  */
 @Injectable()
 export class BulkImportResolver {
-  bulkImportsArray = BulkImports;
+  private organizationService = inject(OrganizationService);
 
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  bulkImportsArray = BulkImports;
 
   /**
    * Gets bulk-import's entity name

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -7,37 +7,47 @@
 
       <form [formGroup]="bulkImportForm">
         <mat-card-content>
-          <div *ngIf="bulkImport.formFields >= 1">
-            <mat-form-field class="flex-fill">
-              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-              <mat-select formControlName="officeId">
-                <mat-option *ngFor="let office of officeData" [value]="office.id">
-                  {{ office.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+          @if (bulkImport.formFields >= 1) {
+            <div>
+              <mat-form-field class="flex-fill">
+                <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+                <mat-select formControlName="officeId">
+                  @for (office of officeData; track office) {
+                    <mat-option [value]="office.id">
+                      {{ office.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
 
-          <div *ngIf="bulkImport.formFields >= 2">
-            <mat-form-field class="flex-fill">
-              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
-              <mat-select formControlName="staffId">
-                <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                  {{ staff.displayName }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+          @if (bulkImport.formFields >= 2) {
+            <div>
+              <mat-form-field class="flex-fill">
+                <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
+                <mat-select formControlName="staffId">
+                  @for (staff of staffData; track staff) {
+                    <mat-option [value]="staff.id">
+                      {{ staff.displayName }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
 
-          <div *ngIf="bulkImport.formFields === 3">
-            <mat-form-field class="flex-fill">
-              <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
-              <mat-select required formControlName="legalForm">
-                <mat-option value="Entity">{{ 'labels.inputs.Entity' | translate }}</mat-option>
-                <mat-option value="Person">{{ 'labels.inputs.Person' | translate }}</mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+          @if (bulkImport.formFields === 3) {
+            <div>
+              <mat-form-field class="flex-fill">
+                <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
+                <mat-select required formControlName="legalForm">
+                  <mat-option value="Entity">{{ 'labels.inputs.Entity' | translate }}</mat-option>
+                  <mat-option value="Person">{{ 'labels.inputs.Person' | translate }}</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
         </mat-card-content>
       </form>
 
@@ -62,9 +72,9 @@
 
       <mifosx-file-upload flex="75%" (change)="onFileSelect($event)" acceptFilter=".xls,.xlsx"></mifosx-file-upload>
 
-      <mat-hint *ngIf="bulkImport.name === 'Clients'">{{
-        'labels.text.Please retain the value Entity/Person in the filename.' | translate
-      }}</mat-hint>
+      @if (bulkImport.name === 'Clients') {
+        <mat-hint>{{ 'labels.text.Please retain the value Entity/Person in the filename.' | translate }}</mat-hint>
+      }
 
       <div class="flex-spacer"></div>
 

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -58,6 +58,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewBulkImportComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+
   /** offices Data */
   officeData: any;
   /** staff Data */
@@ -99,11 +103,7 @@ export class ViewBulkImportComponent implements OnInit {
    * @param {FormBuilder} formBuilder FormBuilder
    * @param {OrganizationService} organizationService OrganizationService
    */
-  constructor(
-    private route: ActivatedRoute,
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService
-  ) {
+  constructor() {
     this.bulkImport.name = this.route.snapshot.params['import-name'];
     this.route.data.subscribe((data: any) => {
       this.officeData = data.offices;

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html

@@ -6,14 +6,18 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId" (selectionChange)="getOffice($event.value)">
-              <mat-option *ngFor="let office of offices" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
+              @for (office of offices; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="bulkLoanForm.controls.officeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (bulkLoanForm.controls.officeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
@@ -31,95 +35,119 @@
             />
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
-            <mat-error *ngIf="bulkLoanForm.controls.assignmentDate.hasError('required')">
-              {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (bulkLoanForm.controls.assignmentDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field class="flex-48" *ngIf="fromLoanOfficers !== undefined">
-            <mat-label>{{ 'labels.inputs.From loan officer' | translate }}</mat-label>
-            <mat-select required formControlName="fromLoanOfficerId" (selectionChange)="getFromOfficers($event.value)">
-              <mat-option *ngFor="let fromOfficers of fromLoanOfficers" [value]="fromOfficers.id">
-                {{ fromOfficers.displayName }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="bulkLoanForm.controls.fromLoanOfficerId.hasError('required')">
-              {{ 'labels.inputs.From Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (fromLoanOfficers !== undefined) {
+            <mat-form-field class="flex-48">
+              <mat-label>{{ 'labels.inputs.From loan officer' | translate }}</mat-label>
+              <mat-select
+                required
+                formControlName="fromLoanOfficerId"
+                (selectionChange)="getFromOfficers($event.value)"
+              >
+                @for (fromOfficers of fromLoanOfficers; track fromOfficers) {
+                  <mat-option [value]="fromOfficers.id">
+                    {{ fromOfficers.displayName }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (bulkLoanForm.controls.fromLoanOfficerId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.From Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
         </div>
 
         <div class="layout-row-wrap gap-2px responsive-column">
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To loan officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
-              <mat-option *ngFor="let toOfficers of toLoanOfficers" [value]="toOfficers.id">
-                {{ toOfficers.displayName }}
-              </mat-option>
+              @for (toOfficers of toLoanOfficers; track toOfficers) {
+                <mat-option [value]="toOfficers.id">
+                  {{ toOfficers.displayName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="bulkLoanForm.controls.toLoanOfficerId.hasError('required')">
-              {{ 'labels.inputs.To Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (bulkLoanForm.controls.toLoanOfficerId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.To Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <div class="layout-row-wrap gap-2px responsive-column">
-          <table *ngIf="officerTemplate !== undefined" class="flex-48">
-            <thead>
-              <th>{{ 'labels.inputs.Clients' | translate }}</th>
-            </thead>
-
-            <tbody>
-              <tr *ngFor="let clients of officerTemplate.accountSummaryCollection.clients">
-                <table>
+          @if (officerTemplate !== undefined) {
+            <table class="flex-48">
+              <thead>
+                <th>{{ 'labels.inputs.Clients' | translate }}</th>
+              </thead>
+              <tbody>
+                @for (clients of officerTemplate.accountSummaryCollection.clients; track clients) {
                   <tr>
-                    <td>
-                      <strong> {{ clients.displayName }} </strong>
-                    </td>
+                    <table>
+                      <tr>
+                        <td>
+                          <strong> {{ clients.displayName }} </strong>
+                        </td>
+                      </tr>
+                      @for (loans of clients.loans; track loans) {
+                        <tr>
+                          <td>
+                            <mat-checkbox (change)="getLoans($event, loans.id)"
+                              >{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox
+                            >
+                          </td>
+                        </tr>
+                      }
+                    </table>
                   </tr>
+                }
+              </tbody>
+            </table>
+          }
 
-                  <tr *ngFor="let loans of clients.loans">
-                    <td>
-                      <mat-checkbox (change)="getLoans($event, loans.id)"
-                        >{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox
-                      >
-                    </td>
-                  </tr>
-                </table>
-              </tr>
-            </tbody>
-          </table>
-
-          <table *ngIf="officerTemplate !== undefined" class="flex-48">
-            <thead>
-              <th>{{ 'labels.inputs.Groups' | translate }}</th>
-            </thead>
-
-            <tbody>
-              <tr *ngFor="let groups of officerTemplate.accountSummaryCollection.groups">
-                <table>
+          @if (officerTemplate !== undefined) {
+            <table class="flex-48">
+              <thead>
+                <th>{{ 'labels.inputs.Groups' | translate }}</th>
+              </thead>
+              <tbody>
+                @for (groups of officerTemplate.accountSummaryCollection.groups; track groups) {
                   <tr>
-                    <td>
-                      <strong> {{ groups.displayName }} </strong>
-                    </td>
+                    <table>
+                      <tr>
+                        <td>
+                          <strong> {{ groups.displayName }} </strong>
+                        </td>
+                      </tr>
+                      @for (loans of groups.loans; track loans) {
+                        <tr>
+                          <td>
+                            <mat-checkbox (change)="getLoans($event, loans.id)"
+                              >{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox
+                            >
+                          </td>
+                        </tr>
+                      }
+                    </table>
                   </tr>
-
-                  <tr *ngFor="let loans of groups.loans">
-                    <td>
-                      <mat-checkbox (change)="getLoans($event, loans.id)"
-                        >{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox
-                      >
-                    </td>
-                  </tr>
-                </table>
-              </tr>
-            </tbody>
-          </table>
+                }
+              </tbody>
+            </table>
+          }
         </div>
       </mat-card-content>
 

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class BulkLoanReassignmnetComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private organizationSevice = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+
   /** Bulk Loan form. */
   bulkLoanForm: UntypedFormGroup;
   /** Office data. */
@@ -56,14 +63,7 @@ export class BulkLoanReassignmnetComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service.
    * @param {Router} router Router.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private organizationSevice: OrganizationService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { offices: any }) => {
       this.offices = data.offices;
     });

src/app/organization/currencies/currencies.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 {
@@ -52,6 +52,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CurrenciesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Currencies data. */
   currenciesData: any;
   /** Columns to be displayed in currencies table. */
@@ -83,12 +88,7 @@ export class CurrenciesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { currencies: any }) => {
       this.currenciesData = data.currencies.selectedCurrencyOptions;
     });

src/app/organization/currencies/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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class CurrenciesResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the currencies data.

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -17,14 +17,16 @@
                 [formControl]="filterFormCtrl"
               ></ngx-mat-select-search>
             </mat-option>
-            <mat-option *ngFor="let currency of currencyData | async" [value]="currency">
-              ({{ currency.code }}) {{ currency.name }}
-            </mat-option>
+            @for (currency of currencyData | async; track currency) {
+              <mat-option [value]="currency"> ({{ currency.code }}) {{ currency.name }} </mat-option>
+            }
           </mat-select>
-          <mat-error *ngIf="currencyForm.controls.currency.hasError('required')">
-            {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (currencyForm.controls.currency.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
         </mat-form-field>
 
         <button
@@ -40,24 +42,25 @@
     </div>
 
     <mat-grid-list cols="2" rowHeight="50px">
-      <mat-grid-tile class="grid-tile-content" *ngFor="let currency of selectedCurrencies; index as i">
-        <div class="grid-container">
-          <div>
-            <button
-              mat-button
-              color="warn"
-              (click)="deleteCurrency(currency.code, i)"
-              *mifosxHasPermission="'UPDATE_CURRENCY'"
+      @for (currency of selectedCurrencies; track currency; let i = $index) {
+        <mat-grid-tile class="grid-tile-content">
+          <div class="grid-container">
+            <div>
+              <button
+                mat-button
+                color="warn"
+                (click)="deleteCurrency(currency.code, i)"
+                *mifosxHasPermission="'UPDATE_CURRENCY'"
+              >
+                <fa-icon icon="trash"></fa-icon>
+              </button>
+            </div>
+            <span class="label m-l-10 p-t-5"
+              ><b>{{ currency.name }}</b></span
             >
-              <fa-icon icon="trash"></fa-icon>
-            </button>
           </div>
-
-          <span class="label m-l-10 p-t-5"
-            ><b>{{ currency.name }}</b></span
-          >
-        </div>
-      </mat-grid-tile>
+        </mat-grid-tile>
+      }
     </mat-grid-list>
   </mat-card>
 </div>

src/app/organization/currencies/manage-currencies/manage-currencies.component.ts

@@ -8,7 +8,8 @@ import {
   AfterViewInit,
   OnDestroy,
   OnChanges,
-  SimpleChanges
+  SimpleChanges,
+  inject
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -29,7 +30,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ReplaySubject, Subject } from 'rxjs';
 import { Currency } from 'app/shared/models/general.model';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { NgFor, NgIf, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatGridList, MatGridTile } from '@angular/material/grid-list';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -51,6 +52,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageCurrenciesComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+  private route = inject(ActivatedRoute);
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationservice = inject(OrganizationService);
+  dialog = inject(MatDialog);
+  private router = inject(Router);
+  private translateService = inject(TranslateService);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   //** Defining PlaceHolders for the search bar */
   placeHolderLabel = '';
   noEntriesFoundLabel = '';
@@ -82,16 +92,7 @@ export class ManageCurrenciesComponent implements OnInit, AfterViewInit, OnDestr
    * @param {OrganizationService} organizationservice Organization Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private formBuilder: UntypedFormBuilder,
-    private organizationservice: OrganizationService,
-    public dialog: MatDialog,
-    private router: Router,
-    private translateService: TranslateService,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { currencies: any }) => {
       this.selectedCurrencies = data.currencies.selectedCurrencyOptions;
       this.currencyList = data.currencies.currencyOptions;

src/app/organization/employees/create-employee/create-employee.component.html

@@ -6,40 +6,52 @@
           <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">
-                {{ office.name }}
-              </mat-option>
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="employeeForm.controls.officeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (employeeForm.controls.officeId.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>
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
-            <mat-error *ngIf="employeeForm.controls.firstname.hasError('required')">
-              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="employeeForm.controls.firstname.hasError('pattern')">
-              {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-              {{ 'labels.inputs.begin with a special character or number' | translate }}
-            </mat-error>
+            @if (employeeForm.controls.firstname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (employeeForm.controls.firstname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.inputs.begin with a special character or number' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
-            <mat-error *ngIf="employeeForm.controls.lastname.hasError('required')">
-              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="employeeForm.controls.lastname.hasError('pattern')">
-              {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-              {{ 'labels.inputs.begin with a special character or number' | translate }}
-            </mat-error>
+            @if (employeeForm.controls.lastname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (employeeForm.controls.lastname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.inputs.begin with a special character or number' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
@@ -63,10 +75,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
-            <mat-error *ngIf="employeeForm.controls.joiningDate.hasError('required')">
-              {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (employeeForm.controls.joiningDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/organization/employees/create-employee/create-employee.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';
 
@@ -29,6 +29,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateEmployeeComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  dialog = inject(MatDialog);
+
   /** Minimum joining date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum joining date allowed. */
@@ -55,17 +65,7 @@ export class CreateEmployeeComponent implements OnInit, AfterViewInit {
    * @param {PopoverService} popoverService PopoverService.
    * @param {MatDialog} dialog MatDialog.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });
@@ -92,13 +92,15 @@ export class CreateEmployeeComponent implements OnInit, AfterViewInit {
         '',
         [
           Validators.required,
-          Validators.pattern('(^[A-z]).*')]
+          Validators.pattern('(^[A-z]).*')
+        ]
       ],
       lastname: [
         '',
         [
           Validators.required,
-          Validators.pattern('(^[A-z]).*')]
+          Validators.pattern('(^[A-z]).*')
+        ]
       ],
       isLoanOfficer: [false],
       mobileNo: [''],

src/app/organization/employees/edit-employee.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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class EditEmployeeResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the employees data.

src/app/organization/employees/edit-employee/edit-employee.component.html

@@ -6,40 +6,52 @@
           <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">
-                {{ office.name }}
-              </mat-option>
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="editEmployeeForm.controls.officeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editEmployeeForm.controls.officeId.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>
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
-            <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('required')">
-              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('pattern')">
-              {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-              {{ 'labels.inputs.begin with a special character or number' | translate }}
-            </mat-error>
+            @if (editEmployeeForm.controls.firstname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (editEmployeeForm.controls.firstname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.inputs.begin with a special character or number' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
-            <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('required')">
-              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('pattern')">
-              {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-              {{ 'labels.inputs.begin with a special character or number' | translate }}
-            </mat-error>
+            @if (editEmployeeForm.controls.lastname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (editEmployeeForm.controls.lastname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.inputs.begin with a special character or number' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
@@ -67,10 +79,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
-            <mat-error *ngIf="editEmployeeForm.controls.joiningDate.hasError('required')">
-              {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editEmployeeForm.controls.joiningDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/organization/employees/edit-employee/edit-employee.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';
 
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditEmployeeComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+
   /** Employee data. */
   employeeData: any;
   /** Minimum joining date allowed. */
@@ -43,14 +50,7 @@ export class EditEmployeeComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { employee: any; offices: any }) => {
       this.employeeData = data.employee;
       this.officeData = data.employee.allowedOffices;
@@ -78,13 +78,15 @@ export class EditEmployeeComponent implements OnInit {
         this.employeeData.firstname,
         [
           Validators.required,
-          Validators.pattern('(^[A-z]).*')]
+          Validators.pattern('(^[A-z]).*')
+        ]
       ],
       lastname: [
         this.employeeData.lastname,
         [
           Validators.required,
-          Validators.pattern('(^[A-z]).*')]
+          Validators.pattern('(^[A-z]).*')
+        ]
       ],
       isLoanOfficer: [this.employeeData.isLoanOfficer],
       mobileNo: [this.employeeData.mobileNo],

src/app/organization/employees/employee.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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class EmployeeResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the employee data.

src/app/organization/employees/employees.component.html

@@ -37,20 +37,22 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Loan Officer' | translate }}</th>
         <td mat-cell *matCellDef="let employee">
           <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
-            <fa-icon
-              *ngIf="employee.isLoanOfficer"
-              icon="check-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.Yes' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
-            <fa-icon
-              *ngIf="!employee.isLoanOfficer"
-              icon="times-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.No' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
+            @if (employee.isLoanOfficer) {
+              <fa-icon
+                icon="check-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
+            @if (!employee.isLoanOfficer) {
+              <fa-icon
+                icon="times-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
           </div>
         </td>
       </ng-container>

src/app/organization/employees/employees.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 {
@@ -54,6 +54,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EmployeesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Employees data. */
   employeesData: any;
   /** Columns to be displayed in employees table. */
@@ -87,12 +92,7 @@ export class EmployeesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { employees: any }) => {
       this.employeesData = data.employees;
     });

src/app/organization/employees/employees.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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class EmployeesResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the employees data.

src/app/organization/employees/view-employee/view-employee.component.html

@@ -41,13 +41,17 @@
           {{ employeeData.isLoanOfficer === true | yesNo }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="employeeData.mobileNo">
-          {{ 'labels.inputs.Mobile Number for SMS' | translate }}
-        </div>
+        @if (employeeData.mobileNo) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Mobile Number for SMS' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="employeeData.mobileNo">
-          {{ employeeData.mobileNo }}
-        </div>
+        @if (employeeData.mobileNo) {
+          <div class="flex-50">
+            {{ employeeData.mobileNo }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Status' | translate }}

src/app/organization/employees/view-employee/view-employee.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 { DateFormatPipe } from '../../../pipes/date-format.pipe';
@@ -21,6 +21,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewEmployeeComponent {
+  private route = inject(ActivatedRoute);
+
   /** Employee data. */
   employeeData: any;
 
@@ -28,7 +30,7 @@ export class ViewEmployeeComponent {
    * Retrieves the employee data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { employee: any }) => {
       this.employeeData = data.employee;
     });

src/app/organization/entity-data-table-checks/create-entity-data-table-checks/create-entity-data-table-checks.component.html

@@ -6,70 +6,91 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
-              <mat-option *ngFor="let entity of entityTypes" [value]="entity.value">
-                {{ entity.name }}
-              </mat-option>
+              @for (entity of entityTypes; track entity) {
+                <mat-option [value]="entity.value">
+                  {{ entity.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createEntityForm.controls.entity.hasError('required')">
-              {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createEntityForm.controls.entity.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
-              <mat-option *ngFor="let status of statusList" [value]="status.code">
-                {{ status.name }}
-              </mat-option>
+              @for (status of statusList; track status) {
+                <mat-option [value]="status.code">
+                  {{ status.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createEntityForm.controls.status.hasError('required')">
-              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createEntityForm.controls.status.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Data Table' | translate }}</mat-label>
             <mat-select required formControlName="datatableName">
-              <mat-option *ngFor="let dataTable of dataTableList" [value]="dataTable.dataTableName">
-                {{ dataTable.dataTableName }}
-              </mat-option>
+              @for (dataTable of dataTableList; track dataTable) {
+                <mat-option [value]="dataTable.dataTableName">
+                  {{ dataTable.dataTableName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="createEntityForm.controls.datatableName.hasError('required')">
-              {{ 'labels.inputs.Data Table' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createEntityForm.controls.datatableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Data Table' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="entityType === 'm_loan'">
-            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
-            <mat-select required formControlName="productId">
-              <mat-option *ngFor="let loanProducts of createEntityData.loanProductDatas" [value]="loanProducts.id">
-                {{ loanProducts.name }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (entityType === 'm_loan') {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
+              <mat-select required formControlName="productId">
+                @for (loanProducts of createEntityData.loanProductDatas; track loanProducts) {
+                  <mat-option [value]="loanProducts.id">
+                    {{ loanProducts.name }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (createEntityForm.controls.productId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="entityType === 'm_savings_account'">
-            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
-            <mat-select required formControlName="productId">
-              <mat-option
-                *ngFor="let savingsProducts of createEntityData.savingsProductDatas"
-                [value]="savingsProducts.id"
-              >
-                {{ savingsProducts.name }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (entityType === 'm_savings_account') {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
+              <mat-select required formControlName="productId">
+                @for (savingsProducts of createEntityData.savingsProductDatas; track savingsProducts) {
+                  <mat-option [value]="savingsProducts.id">
+                    {{ savingsProducts.name }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (createEntityForm.controls.productId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
         </div>
       </mat-card-content>
 

src/app/organization/entity-data-table-checks/create-entity-data-table-checks/create-entity-data-table-checks.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -25,6 +25,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateEntityDataTableChecksComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private organizationService = inject(OrganizationService);
+  private router = inject(Router);
+
   /** Create Entity Datatable Checks form. */
   createEntityForm: UntypedFormGroup;
   /** Entity Datatable Checks data. */
@@ -45,12 +50,7 @@ export class CreateEntityDataTableChecksComponent implements OnInit {
    * @param {OrganizationService} organizationService Organization Service.
    * @param {Router} router Router.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private organizationService: OrganizationService,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { dataTableEntity: any }) => {
       this.createEntityData = data.dataTableEntity;
       // hardcoded, because data.dataTableEntity.entities might change anytime its order

src/app/organization/entity-data-table-checks/enitity-data-table-checks-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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class EntityDataTableChecksTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Entity Data Table Checks data.

src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html

@@ -44,20 +44,22 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <div [className]="entityDataTableCheck.systemDefined === true ? 'true' : 'false'">
-            <fa-icon
-              *ngIf="entityDataTableCheck.systemDefined"
-              icon="check-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.Yes' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
-            <fa-icon
-              *ngIf="!entityDataTableCheck.systemDefined"
-              icon="times-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.No' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
+            @if (entityDataTableCheck.systemDefined) {
+              <fa-icon
+                icon="check-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
+            @if (!entityDataTableCheck.systemDefined) {
+              <fa-icon
+                icon="times-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
           </div>
         </td>
       </ng-container>

src/app/organization/entity-data-table-checks/entity-data-table-checks.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -54,6 +54,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EntityDataTableChecksComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private dialog = inject(MatDialog);
+
   /** Entity Data Table Checks data. */
   entityDataTableChecksData: any;
   /** Columns to be displayed in entity data table checks table. */
@@ -98,11 +102,7 @@ export class EntityDataTableChecksComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { entityDataTableChecks: any }) => {
       this.entityDataTableChecksData = data.entityDataTableChecks.pageItems;
     });

src/app/organization/entity-data-table-checks/entity-data-table-checks.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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class EntityDataTableChecksResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Entity Data Table Checks data.

src/app/organization/fund-mapping/advance-search-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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class AdvanceSearchTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Advance Search template.

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -1,282 +1,306 @@
-<mat-card class="container" *ngIf="!isCollapsed">
-  <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
-    <mat-card-content>
-      <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
-        <mat-form-field class="flex-48">
-          <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
-          <mat-select formControlName="loanStatus" multiple>
-            <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
-            <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
-            <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
-            <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
-            <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <span class="flex-48 hide-lt-md"></span>
-
-        <mat-form-field class="flex-48">
-          <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
-          <mat-select formControlName="loanProducts" multiple>
-            <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
-              {{ product.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <mat-form-field class="flex-48">
-          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-          <mat-select formControlName="offices" multiple>
-            <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
-              {{ office.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <mat-form-field class="flex-31">
-          <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
-          <mat-select required formControlName="loanDateOption">
-            <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
-            <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
-            <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
-          </mat-select>
-          <mat-error *ngIf="fundMappingForm.controls.loanDateOption.hasError('required')">
-            {{ 'labels.inputs.Date Type' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field class="flex-31" (click)="fromDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="fromDatePicker"
-            formControlName="loanFromDate"
-            required
-            placeholder="{{ 'labels.inputs.From Date' | translate }}"
-          />
-          <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #fromDatePicker></mat-datepicker>
-          <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
-            {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field class="flex-31" (click)="toDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="toDatePicker"
-            formControlName="loanToDate"
-            required
-            placeholder="{{ 'labels.inputs.To Date' | translate }}"
-          />
-          <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #toDatePicker></mat-datepicker>
-          <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
-            {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-checkbox
-          labelPosition="before"
-          formControlName="includeOutStandingAmountPercentage"
-          class="margin-b flex-73"
-        >
-          {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
-        </mat-checkbox>
-
-        <div
-          *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
-          class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
-        >
-          <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
-            <mat-select required formControlName="outStandingAmountPercentageCondition">
-              <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-              <mat-option value="<=">&lt;=</mat-option>
-              <mat-option value=">=">&gt;=</mat-option>
-              <mat-option value="<">&lt;</mat-option>
-              <mat-option value=">">&gt;</mat-option>
-              <mat-option value="=">=</mat-option>
+@if (!isCollapsed) {
+  <mat-card class="container">
+    <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
+            <mat-select formControlName="loanStatus" multiple>
+              <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
+              <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
+              <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
+              <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
+              <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
             </mat-select>
-            <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
-              {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
           </mat-form-field>
-
-          <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="minOutStandingAmountPercentage"
-              placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
-            />
-            <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
-              {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="outStandingAmountPercentage"
-              placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
-            />
-            <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
-              {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="maxOutStandingAmountPercentage"
-              placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
-            />
-            <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
-              {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
-
-        <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
-          {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
-        </mat-checkbox>
-
-        <div
-          *ngIf="fundMappingForm.value.includeOutstandingAmount"
-          class="flex-fill layout-row-wrap gap-2percent responsive-column"
-        >
-          <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
-            <mat-select required formControlName="outstandingAmountCondition">
-              <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-              <mat-option value="<=">&lt;=</mat-option>
-              <mat-option value=">=">&gt;=</mat-option>
-              <mat-option value="<">&lt;</mat-option>
-              <mat-option value=">">&gt;</mat-option>
-              <mat-option value="=">=</mat-option>
+          <span class="flex-48 hide-lt-md"></span>
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
+            <mat-select formControlName="loanProducts" multiple>
+              @for (product of advanceSearchTemplate.loanProducts; track product) {
+                <mat-option [value]="product.id">
+                  {{ product.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
-              {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
           </mat-form-field>
-
-          <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+            <mat-select formControlName="offices" multiple>
+              @for (office of advanceSearchTemplate.offices; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="flex-31">
+            <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
+            <mat-select required formControlName="loanDateOption">
+              <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
+              <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
+              <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
+            </mat-select>
+            @if (fundMappingForm.controls.loanDateOption.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Date Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+          </mat-form-field>
+          <mat-form-field class="flex-31" (click)="fromDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input
-              type="number"
               matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="fromDatePicker"
+              formControlName="loanFromDate"
               required
-              formControlName="minOutstandingAmount"
-              placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
+              placeholder="{{ 'labels.inputs.From Date' | translate }}"
             />
-            <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
-              {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #fromDatePicker></mat-datepicker>
+            @if (fundMappingForm.controls.loanFromDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
-
-          <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
+          <mat-form-field class="flex-31" (click)="toDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input
-              type="number"
               matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="toDatePicker"
+              formControlName="loanToDate"
               required
-              formControlName="outstandingAmount"
-              placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
+              placeholder="{{ 'labels.inputs.To Date' | translate }}"
             />
-            <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
-              {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #toDatePicker></mat-datepicker>
+            @if (fundMappingForm.controls.loanToDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
+          <mat-checkbox
+            labelPosition="before"
+            formControlName="includeOutStandingAmountPercentage"
+            class="margin-b flex-73"
+          >
+            {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
+          </mat-checkbox>
+          @if (fundMappingForm.value.includeOutStandingAmountPercentage) {
+            <div class="flex-fill layout-row-wrap gap-2percent layout-xs-column">
+              @if (fundMappingForm.contains('outStandingAmountPercentageCondition')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
+                  <mat-select required formControlName="outStandingAmountPercentageCondition">
+                    <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
+                    <mat-option value="<=">&lt;=</mat-option>
+                    <mat-option value=">=">&gt;=</mat-option>
+                    <mat-option value="<">&lt;</mat-option>
+                    <mat-option value=">">&gt;</mat-option>
+                    <mat-option value="=">=</mat-option>
+                  </mat-select>
+                  @if (fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
 
-          <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
-            <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-            <input
-              type="number"
-              matInput
-              required
-              formControlName="maxOutstandingAmount"
-              placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
-            />
-            <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
-              {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+              @if (fundMappingForm.contains('minOutStandingAmountPercentage')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="minOutStandingAmountPercentage"
+                    placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fundMappingForm.contains('outStandingAmountPercentage')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="outStandingAmountPercentage"
+                    placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.outStandingAmountPercentage.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fundMappingForm.contains('maxOutStandingAmountPercentage')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="maxOutStandingAmountPercentage"
+                    placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+            </div>
+          }
+          <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
+            {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
+          </mat-checkbox>
+          @if (fundMappingForm.value.includeOutstandingAmount) {
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column">
+              @if (fundMappingForm.contains('outstandingAmountCondition')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
+                  <mat-select required formControlName="outstandingAmountCondition">
+                    <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
+                    <mat-option value="<=">&lt;=</mat-option>
+                    <mat-option value=">=">&gt;=</mat-option>
+                    <mat-option value="<">&lt;</mat-option>
+                    <mat-option value=">">&gt;</mat-option>
+                    <mat-option value="=">=</mat-option>
+                  </mat-select>
+                  @if (fundMappingForm.controls.outstandingAmountCondition.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+
+              @if (fundMappingForm.contains('minOutstandingAmount')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="minOutstandingAmount"
+                    placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.minOutstandingAmount.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fundMappingForm.contains('outstandingAmount')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="outstandingAmount"
+                    placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.outstandingAmount.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fundMappingForm.contains('maxOutstandingAmount')) {
+                <mat-form-field class="flex-31">
+                  <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
+                  <input
+                    type="number"
+                    matInput
+                    required
+                    formControlName="maxOutstandingAmount"
+                    placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
+                  />
+                  @if (fundMappingForm.controls.maxOutstandingAmount.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+            </div>
+          }
         </div>
-      </div>
-    </mat-card-content>
-
-    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" type="submit" [disabled]="!fundMappingForm.valid">
-        <fa-icon icon="search"></fa-icon>&nbsp; {{ 'labels.buttons.Summary' | translate }}
-      </button>
-    </mat-card-actions>
-  </form>
-</mat-card>
-
-<div class="container" *ngIf="isCollapsed">
-  <mat-card>
-    <div class="m-b-20">
-      <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        {{ 'labels.buttons.Parameters' | translate }}
-      </button>
-    </div>
-
-    <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
-        <td mat-cell *matCellDef="let loan">{{ loan.officeName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
-        <td mat-cell *matCellDef="let loan">{{ loan.loanProductName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Count' | translate }}</th>
-        <td mat-cell *matCellDef="let loan">{{ loan.count }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Outstanding' | translate }}</th>
-        <td mat-cell *matCellDef="let loan">{{ loan.loanOutStanding }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="percentage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }}</th>
-        <td mat-cell *matCellDef="let loan">{{ loan.percentage }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-
-    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+      </mat-card-content>
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" type="submit" [disabled]="!fundMappingForm.valid">
+          <fa-icon icon="search"></fa-icon>&nbsp; {{ 'labels.buttons.Summary' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
   </mat-card>
-</div>
+}
+
+@if (isCollapsed) {
+  <div class="container">
+    <mat-card>
+      <div class="m-b-20">
+        <button mat-raised-button color="primary" (click)="isCollapsed = false">
+          {{ 'labels.buttons.Parameters' | translate }}
+        </button>
+      </div>
+      <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
+        <ng-container matColumnDef="officeName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.officeName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="productName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.loanProductName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="count">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Count' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.count }}</td>
+        </ng-container>
+        <ng-container matColumnDef="outstanding">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Outstanding' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.loanOutStanding }}</td>
+        </ng-container>
+        <ng-container matColumnDef="percentage">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.percentage }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+    </mat-card>
+  </div>
+}

src/app/organization/fund-mapping/fund-mapping.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 {
@@ -61,6 +61,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class FundMappingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+
   /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
@@ -96,13 +102,7 @@ export class FundMappingComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private route: ActivatedRoute,
-    private dateUtils: Dates
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { advanceSearchTemplate: any }) => {
       this.advanceSearchTemplate = data.advanceSearchTemplate;
     });
@@ -137,13 +137,16 @@ export class FundMappingComponent implements OnInit {
     this.fundMappingForm = this.formBuilder.group({
       loanStatus: [
         [],
-        this.nonEmptyArrayValidator.bind(this)],
+        this.nonEmptyArrayValidator.bind(this)
+      ],
       loanProducts: [
         [],
-        this.nonEmptyArrayValidator.bind(this)],
+        this.nonEmptyArrayValidator.bind(this)
+      ],
       offices: [
         [],
-        this.nonEmptyArrayValidator.bind(this)],
+        this.nonEmptyArrayValidator.bind(this)
+      ],
       loanDateOption: [
         '',
         Validators.required

src/app/organization/holidays/create-holiday/create-holiday.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name" />
-            <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (holidayForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
@@ -24,10 +26,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (holidayForm.controls.fromDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
@@ -42,42 +46,52 @@
             />
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (holidayForm.controls.toDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
-              <mat-option *ngFor="let repayments of repaymentSchedulingTypes" [value]="repayments.id">
-                {{ repayments.value }}
-              </mat-option>
+              @for (repayments of repaymentSchedulingTypes; track repayments) {
+                <mat-option [value]="repayments.id">
+                  {{ repayments.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (holidayForm.controls.reschedulingType.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')" (click)="repaymentDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="repaymentDatePicker"
-              required
-              formControlName="repaymentsRescheduledTo"
-            />
-            <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #repaymentDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (holidayForm.contains('repaymentsRescheduledTo')) {
+            <mat-form-field (click)="repaymentDatePicker.open()">
+              <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="repaymentDatePicker"
+                required
+                formControlName="repaymentsRescheduledTo"
+              />
+              <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #repaymentDatePicker></mat-datepicker>
+              @if (holidayForm.controls.repaymentsRescheduledTo.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>

src/app/organization/holidays/create-holiday/create-holiday.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports. */
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnInit, ViewChild, Injectable } from '@angular/core';
+import { Component, OnInit, ViewChild, Injectable, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -53,6 +53,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateHolidayComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settings = inject(SettingsService);
+  private router = inject(Router);
+  private _database = inject(ChecklistDatabase);
+  private createHoliday = inject(CreateHoliday);
+
   /** Create Holiday form. */
   holidayForm: UntypedFormGroup;
   /** Repayment Scheduling data. */
@@ -101,16 +110,9 @@ export class CreateHolidayComponent implements OnInit {
    * @param {OrganizationService} organizationService Organization Service.
    * @param {Router} router Router.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settings: SettingsService,
-    private router: Router,
-    private _database: ChecklistDatabase,
-    private createHoliday: CreateHoliday
-  ) {
+  constructor() {
+    const _database = this._database;
+
     this.route.data.subscribe((data: { offices: any; holidayTemplate: any }) => {
       this.officesData = data.offices;
       this.repaymentSchedulingTypes = data.holidayTemplate;

src/app/organization/holidays/edit-holiday/edit-holiday.component.html

@@ -6,78 +6,98 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name" />
-            <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (holidayForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="!isActiveHoliday" (click)="fromDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="fromDatePicker"
-              required
-              formControlName="fromDate"
-            />
-            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #fromDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (!isActiveHoliday) {
+            <mat-form-field (click)="fromDatePicker.open()">
+              <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="fromDatePicker"
+                required
+                formControlName="fromDate"
+              />
+              <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #fromDatePicker></mat-datepicker>
+              @if (holidayForm.controls.fromDate.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!isActiveHoliday" (click)="toDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="toDatePicker"
-              required
-              formControlName="toDate"
-            />
-            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #toDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (!isActiveHoliday) {
+            <mat-form-field (click)="toDatePicker.open()">
+              <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="toDatePicker"
+                required
+                formControlName="toDate"
+              />
+              <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #toDatePicker></mat-datepicker>
+              @if (holidayForm.controls.toDate.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!isActiveHoliday">
-            <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
-            <mat-select required formControlName="reschedulingType">
-              <mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
-                {{ repayments.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (!isActiveHoliday) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
+              <mat-select required formControlName="reschedulingType">
+                @for (repayments of holidayData.repaymentSchedulingTypes; track repayments) {
+                  <mat-option [value]="repayments.id">
+                    {{ repayments.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (holidayForm.controls.reschedulingType.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2" (click)="repaymentDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="repaymentDatePicker"
-              required
-              formControlName="repaymentsRescheduledTo"
-            />
-            <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #repaymentDatePicker></mat-datepicker>
-            <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (!isActiveHoliday && reSchedulingType === 2) {
+            <mat-form-field (click)="repaymentDatePicker.open()">
+              <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="repaymentDatePicker"
+                required
+                formControlName="repaymentsRescheduledTo"
+              />
+              <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #repaymentDatePicker></mat-datepicker>
+              @if (holidayForm.controls.repaymentsRescheduledTo.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>

src/app/organization/holidays/edit-holiday/edit-holiday.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -27,6 +27,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditHolidayComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private organizatioService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+
   /** Edit Holiday form. */
   holidayForm: UntypedFormGroup;
   /** Holiday data. */
@@ -48,14 +55,7 @@ export class EditHolidayComponent implements OnInit {
    * @param {OrganizationService} organizatioService Organization Service.
    * @param {Router} router Router.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private organizatioService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { holiday: any; holidayTemplate: any }) => {
       this.holidayData = data.holiday;
       this.holidayData.repaymentSchedulingTypes = data.holidayTemplate;

src/app/organization/holidays/holiday-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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class HolidayTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the holiday data.

src/app/organization/holidays/holiday.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 { OrganizationService } from 'app/organization/organization.service';
  */
 @Injectable()
 export class HolidayResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the holiday data.

src/app/organization/holidays/holidays.component.html

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

src/app/organization/holidays/holidays.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 {
@@ -56,6 +56,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class HolidaysComponent implements OnInit, AfterViewInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Office selector. */
   officeSelector = new UntypedFormControl();
   /** Holidays data. */
@@ -96,13 +102,7 @@ export class HolidaysComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });

src/app/organization/holidays/view-holidays/view-holidays.component.html

@@ -1,9 +1,11 @@
 <div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
-    <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Activate' | translate }}
-    </button>
+    @if (holidayData.status.value !== 'Active') {
+      <button mat-raised-button color="accent" (click)="activateHoliday()">
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Activate' | translate }}
+      </button>
+    }
   </span>
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
@@ -47,19 +49,17 @@
           {{ 'labels.inputs.Repayments Scheduled To' | translate }}
         </div>
 
-        <div
-          class="flex-50"
-          *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null"
-        >
-          {{ holidayData.repaymentsRescheduledTo | dateFormat }}
-        </div>
+        @if (holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null) {
+          <div class="flex-50">
+            {{ holidayData.repaymentsRescheduledTo | dateFormat }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null"
-        >
-          {{ 'labels.inputs.Next Repayment Date' | translate }}
-        </div>
+        @if (holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null) {
+          <div class="flex-50">
+            {{ 'labels.inputs.Next Repayment Date' | translate }}
+          </div>
+        }
       </div>
     </mat-card-content>
   </mat-card>

src/app/organization/holidays/view-holidays/view-holidays.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';
 
@@ -28,6 +28,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewHolidaysComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private organizationService = inject(OrganizationService);
+
   /** Holiday data. */
   holidayData: any;
 
@@ -35,13 +41,7 @@ export class ViewHolidaysComponent {
    * Retrieves hioliday data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService,
-    private organizationService: OrganizationService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { holidays: any }) => {
       this.holidayData = data.holidays;
     });

src/app/organization/investors/investors.component.html

@@ -66,164 +66,176 @@
     </div>
 
     <div class="mat-elevation-z8 container m-t-20">
-      <div *ngIf="isLoading" class="loader">
-        <div class="loading"></div>
-      </div>
-      <mat-accordion *ngIf="existsDataToFilter">
-        <mat-expansion-panel *ngFor="let record of searchResults; index as i" class="record">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <table>
-                <tr>
-                  <td>
-                    <div [ngClass]="itemStatus(record.status)" class="m-r-20">
-                      <fa-icon icon="stop"></fa-icon>
-                      <span class="m-l-10 status">{{ record.status }}</span>
-                    </div>
-                  </td>
-                  <td class="field-name">{{ 'labels.inputs.Owner External Id' | translate }}</td>
-                  <td>
-                    <mifosx-external-identifier externalId="{{ record.owner.externalId }}"></mifosx-external-identifier>
-                  </td>
-                  <td class="field-name">{{ 'labels.inputs.Transfer External Id' | translate }}</td>
-                  <td>
-                    <mifosx-external-identifier
-                      externalId="{{ record.transferExternalId }}"
-                    ></mifosx-external-identifier>
-                  </td>
-                  <td class="field-name">{{ 'labels.inputs.Effective From' | translate }}</td>
-                  <td>{{ record.effectiveFrom | dateFormat }}</td>
-                </tr>
-              </table>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
+      @if (isLoading) {
+        <div class="loader">
+          <div class="loading"></div>
+        </div>
+      }
+      @if (existsDataToFilter) {
+        <mat-accordion>
+          @for (record of searchResults; track record; let i = $index) {
+            <mat-expansion-panel class="record">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <table>
+                    <tr>
+                      <td>
+                        <div [ngClass]="itemStatus(record.status)" class="m-r-20">
+                          <fa-icon icon="stop"></fa-icon>
+                          <span class="m-l-10 status">{{ record.status }}</span>
+                        </div>
+                      </td>
+                      <td class="field-name">{{ 'labels.inputs.Owner External Id' | translate }}</td>
+                      <td>
+                        <mifosx-external-identifier
+                          externalId="{{ record.owner.externalId }}"
+                        ></mifosx-external-identifier>
+                      </td>
+                      <td class="field-name">{{ 'labels.inputs.Transfer External Id' | translate }}</td>
+                      <td>
+                        <mifosx-external-identifier
+                          externalId="{{ record.transferExternalId }}"
+                        ></mifosx-external-identifier>
+                      </td>
+                      <td class="field-name">{{ 'labels.inputs.Effective From' | translate }}</td>
+                      <td>{{ record.effectiveFrom | dateFormat }}</td>
+                    </tr>
+                  </table>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="external-asset-transfer">
+                <table>
+                  <tbody>
+                    <tr>
+                      <td class="m-l-5 flex-25">
+                        <b>{{ 'labels.inputs.Status' | translate }} :</b>
+                      </td>
+                      <td class="flex-25 m-l-5 left">
+                        <div [ngClass]="itemStatus(record.status)">
+                          <fa-icon icon="stop"></fa-icon>
+                          <span class="m-l-5 status">{{ record.status }}</span>
+                        </div>
+                      </td>
+                      <td class="m-l-5 flex-25">
+                        <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
+                      </td>
+                      <td class="flex-25 m-l-5 left">
+                        <mifosx-external-identifier
+                          externalId="{{ record.owner.externalId }}"
+                          completed="true"
+                        ></mifosx-external-identifier>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="m-l-5 flex-25">
+                        <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
+                      </td>
+                      <td class="m-l-5 flex-25">
+                        {{ record.settlementDate | dateFormat }}
+                      </td>
+                      <td class="m-l-5 flex-25">
+                        <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
+                      </td>
+                      <td class="m-l-5 flex-25">
+                        {{ record.effectiveFrom | dateFormat }}
+                      </td>
+                    </tr>
+                    @if (record.details) {
+                      <tr>
+                        <td class="m-l-5 flex-25">
+                          <b>{{ 'labels.inputs.Details' | translate }} :</b>
+                        </td>
+                        <td class="flex-75 left">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">
+                                  {{ record.details.totalPrincipalOutstanding | formatNumber }}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">
+                                  {{ record.details.totalInterestOutstanding | formatNumber }}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">
+                                  {{ record.details.totalFeeChargesOutstanding | formatNumber }}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">
+                                  {{ record.details.totalPenaltyChargesOutstanding | formatNumber }}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">{{ record.details.totalOutstanding | formatNumber }}</td>
+                              </tr>
+                              <tr>
+                                <td class="flex-50 m-l-5">
+                                  <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
+                                </td>
+                                <td class="flex-50 r-amount">{{ record.details.totalOverpaid | formatNumber }}</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+              <mat-divider [inset]="true"></mat-divider>
+              @if (canBeCancelled(record)) {
+                <div class="record-actions layout-row align-flex-end">
+                  <button
+                    mat-button
+                    color="warn"
+                    (click)="cancelPendingSale(record)"
+                    matTooltip="{{ 'labels.text.Cancel Pending Sale' | translate }}"
+                  >
+                    <fa-icon icon="trash"></fa-icon>
+                  </button>
+                </div>
+              }
+            </mat-expansion-panel>
+          }
+        </mat-accordion>
+      }
 
-          <div class="external-asset-transfer">
-            <table>
-              <tbody>
-                <tr>
-                  <td class="m-l-5 flex-25">
-                    <b>{{ 'labels.inputs.Status' | translate }} :</b>
-                  </td>
-                  <td class="flex-25 m-l-5 left">
-                    <div [ngClass]="itemStatus(record.status)">
-                      <fa-icon icon="stop"></fa-icon>
-                      <span class="m-l-5 status">{{ record.status }}</span>
-                    </div>
-                  </td>
-                  <td class="m-l-5 flex-25">
-                    <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
-                  </td>
-                  <td class="flex-25 m-l-5 left">
-                    <mifosx-external-identifier
-                      externalId="{{ record.owner.externalId }}"
-                      completed="true"
-                    ></mifosx-external-identifier>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="m-l-5 flex-25">
-                    <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
-                  </td>
-                  <td class="m-l-5 flex-25">
-                    {{ record.settlementDate | dateFormat }}
-                  </td>
-                  <td class="m-l-5 flex-25">
-                    <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
-                  </td>
-                  <td class="m-l-5 flex-25">
-                    {{ record.effectiveFrom | dateFormat }}
-                  </td>
-                </tr>
-                <tr *ngIf="record.details">
-                  <td class="m-l-5 flex-25">
-                    <b>{{ 'labels.inputs.Details' | translate }} :</b>
-                  </td>
-                  <td class="flex-75 left">
-                    <table>
-                      <tbody>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">
-                            {{ record.details.totalPrincipalOutstanding | formatNumber }}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">
-                            {{ record.details.totalInterestOutstanding | formatNumber }}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">
-                            {{ record.details.totalFeeChargesOutstanding | formatNumber }}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">
-                            {{ record.details.totalPenaltyChargesOutstanding | formatNumber }}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">{{ record.details.totalOutstanding | formatNumber }}</td>
-                        </tr>
-                        <tr>
-                          <td class="flex-50 m-l-5">
-                            <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
-                          </td>
-                          <td class="flex-50 r-amount">{{ record.details.totalOverpaid | formatNumber }}</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <mat-divider [inset]="true"></mat-divider>
-
-          <div class="record-actions layout-row align-flex-end" *ngIf="canBeCancelled(record)">
-            <button
-              mat-button
-              color="warn"
-              (click)="cancelPendingSale(record)"
-              matTooltip="{{ 'labels.text.Cancel Pending Sale' | translate }}"
-            >
-              <fa-icon icon="trash"></fa-icon>
-            </button>
-          </div>
-        </mat-expansion-panel>
-      </mat-accordion>
-
-      <mat-paginator
-        [pageSize]="pageSize"
-        [pageSizeOptions]="[50, 100, 200]"
-        [length]="totalRows"
-        (page)="pageChanged($event)"
-        showFirstLastButtons
-        *ngIf="existsDataToFilter"
-      ></mat-paginator>
+      @if (existsDataToFilter) {
+        <mat-paginator
+          [pageSize]="pageSize"
+          [pageSizeOptions]="[50, 100, 200]"
+          [length]="totalRows"
+          (page)="pageChanged($event)"
+          showFirstLastButtons
+        ></mat-paginator>
+      }
     </div>
 
-    <div class="alert" *ngIf="!existsDataToFilter">
-      <div class="message">
-        <i class="fa fa-exclamation-circle alert-check"></i>
-        {{ 'labels.text.No data found' | translate }}
+    @if (!existsDataToFilter) {
+      <div class="alert">
+        <div class="message">
+          <i class="fa fa-exclamation-circle alert-check"></i>
+          {{ 'labels.text.No data found' | translate }}
+        </div>
       </div>
-    </div>
+    }
   </mat-card-content>
 </mat-card>

src/app/organization/investors/investors.component.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
@@ -12,7 +12,7 @@ import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-own
 import { SettingsService } from 'app/settings/settings.service';
 import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.component';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   MatAccordion,
   MatExpansionPanel,
@@ -34,8 +34,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))])
-
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
@@ -54,6 +54,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class InvestorsComponent implements OnInit {
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private externalAssetOwner = inject(ExternalAssetOwner);
+  private externalAssetOwnerService = inject(ExternalAssetOwnerService);
+  private dateUtils = inject(Dates);
+
   /** Minimum transaction date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum transaction date allowed. */
@@ -113,14 +120,6 @@ export class InvestorsComponent implements OnInit {
     'totalAmount',
     'actions'
   ];
-  constructor(
-    private settingsService: SettingsService,
-    private router: Router,
-    private dialog: MatDialog,
-    private externalAssetOwner: ExternalAssetOwner,
-    private externalAssetOwnerService: ExternalAssetOwnerService,
-    private dateUtils: Dates
-  ) {}
 
   ngOnInit(): void {
     this.maxDate = this.settingsService.maxAllowedDate;

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaAndTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Pprovisioning criteria and template data.

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the Pprovisioning criteria template

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria.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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriaResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the loan provisioning criteria data.

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criterias.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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class LoanProvisioningCriteriasResolver {
-  /**
-   * @param {OrganizationService} organizationService Products service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the products data.

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -6,32 +6,38 @@
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
-            <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
-              <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
-                {{ product.name }}
-              </mat-option>
+              @for (product of loanProvisioningCriteriaTemplate.loanProducts; track product) {
+                <mat-option [value]="product">
+                  {{ product.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="provisioningCriteriaForm.controls.loanProducts.hasError('required')">
-              {{ 'labels.inputs.Selected Products' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.loanProducts.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Selected Products' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </form>
     </div>
 
     <div class="mat-elevation-z1">
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">
-        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint
-      >
+      @if (!provisioningCriteriaFormValid) {
+        <mat-hint> {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+      }
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
         <ng-container matColumnDef="category">

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.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 { MatDialog } from '@angular/material/dialog';
 import {
@@ -58,6 +58,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateLoanProvisioningCriteriaComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
   /** Loan Provisioning Criteria Template */
@@ -98,14 +105,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router,
-    public dialog: MatDialog,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteriaTemplate: any }) => {
       this.loanProvisioningCriteriaTemplate = data.loanProvisioningCriteriaTemplate;
       this.definitions = this.loanProvisioningCriteriaTemplate.definitions;

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -6,18 +6,22 @@
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
-            <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
-              <mat-option *ngFor="let product of loanProducts" [value]="product">
-                {{ product.name }}
-              </mat-option>
+              @for (product of loanProducts; track product) {
+                <mat-option [value]="product">
+                  {{ product.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -25,9 +29,9 @@
     </div>
 
     <div class="mat-elevation-z1">
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{
-        'labels.text.Provisioning criteria definitions' | translate
-      }}</mat-hint>
+      @if (!provisioningCriteriaFormValid) {
+        <mat-hint>{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+      }
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
         <ng-container matColumnDef="category">

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.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 { MatDialog } from '@angular/material/dialog';
 import {
@@ -58,6 +58,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditLoanProvisioningCriteriaComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+  dialog = inject(MatDialog);
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
   /** Loan Provisioning Criteria Template */
@@ -98,14 +105,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private router: Router,
-    private settingsService: SettingsService,
-    public dialog: MatDialog,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteriaAndTemplate: any }) => {
       this.loanProvisioningCriteriaAndTemplate = data.loanProvisioningCriteriaAndTemplate;
       this.definitions = this.loanProvisioningCriteriaAndTemplate.definitions;

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.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 {
@@ -48,6 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class LoanProvisioningCriteriaComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Loan Provisioning Criteria data. */
   loanProvisioningCriteriaData: any;
   /** Columns to be displayed in loan provisioning criteria table. */
@@ -67,7 +69,7 @@ export class LoanProvisioningCriteriaComponent implements OnInit {
    * Retrieves the loan provisioning criteria data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriterias: any }) => {
       this.loanProvisioningCriteriaData = data.loanProvisioningCriterias;
     });

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import {
@@ -51,6 +51,11 @@ import { LoanProduct } from 'app/products/loan-products/models/loan-product.mode
   ]
 })
 export class ViewLoanProvisioningCriteriaComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   /** Loan Provisioning data. */
   provisioningData: any;
   /** Loan Product String. */
@@ -74,12 +79,7 @@ export class ViewLoanProvisioningCriteriaComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { loanProvisioningCriteria: any }) => {
       this.provisioningData = data.loanProvisioningCriteria;
     });

src/app/organization/manage-funds/create-fund/create-fund.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name" />
-            <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (fundForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>

src/app/organization/manage-funds/create-fund/create-fund.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { OrganizationService } from 'app/organization/organization.service';
@@ -13,23 +13,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateFundComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   /** Charge form. */
   fundForm: UntypedFormGroup;
 
-  /**
-   * Retrieves the charge data from `resolve`.
-   * @param {ProductsService} productsService Products Service.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   */
-  constructor(
-    private organizationService: OrganizationService,
-    private formBuilder: UntypedFormBuilder,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
-
   ngOnInit() {
     this.createFundForm();
   }

src/app/organization/manage-funds/edit-fund/edit-fund.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name" />
-            <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (fundForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>

src/app/organization/manage-funds/edit-fund/edit-fund.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { OrganizationService } from 'app/organization/organization.service';
@@ -13,6 +13,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditFundComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   /** Selected Data. */
   fundData: any;
   /** Charge form. */
@@ -25,12 +30,7 @@ export class EditFundComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private formBuilder: UntypedFormBuilder,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { fundData: any }) => {
       this.fundData = data.fundData;
     });

src/app/organization/manage-funds/manage-fund.resolver.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { OrganizationService } from '../organization.service';
@@ -7,10 +7,7 @@ import { OrganizationService } from '../organization.service';
   providedIn: 'root'
 })
 export class ManageFundResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the manage funds data.

src/app/organization/manage-funds/manage-funds.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 { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
@@ -64,6 +64,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageFundsComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationservice = inject(OrganizationService);
+  dialog = inject(MatDialog);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   /** Manage Funds data. */
   fundsData: any;
   /** New Fund form */
@@ -98,15 +106,7 @@ export class ManageFundsComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private formBuilder: UntypedFormBuilder,
-    private organizationservice: OrganizationService,
-    public dialog: MatDialog,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { funds: any }) => {
       this.fundsData = data.funds;
     });
@@ -171,7 +171,6 @@ export class ManageFundsComponent implements OnInit, AfterViewInit {
         type: 'text',
         required: true
       })
-
     ];
     const data = {
       title: 'Edit Fund',

src/app/organization/manage-funds/manage-funds.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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class ManageFundsResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the manage funds data.

src/app/organization/manage-funds/view-fund/view-fund.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component';
@@ -15,6 +15,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewFundComponent {
+  private route = inject(ActivatedRoute);
+
   /** Fund data. */
   fundData: any;
 
@@ -22,7 +24,7 @@ export class ViewFundComponent {
    * Retrieves the charge data from `resolve`.
    * @param {Router} router Router for navigation.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { fundData: any }) => {
       this.fundData = data.fundData;
     });

src/app/organization/offices/common-resolvers/edit-office.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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class EditOfficeResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the office and template data.

src/app/organization/offices/common-resolvers/office-datatable.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { SystemService } from 'app/system/system.service';
 
@@ -11,10 +11,7 @@ import { Observable } from 'rxjs';
  */
 @Injectable()
 export class OfficeDatatableResolver {
-  /**
-   * @param {SystemService} systemService Products service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the Office's Datatable data.

src/app/organization/offices/common-resolvers/office-datatables.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { SystemService } from 'app/system/system.service';
 
@@ -11,10 +11,7 @@ import { Observable } from 'rxjs';
  */
 @Injectable()
 export class OfficeDatatablesResolver {
-  /**
-   * @param {SystemService} systemService Products service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the loan product data.

src/app/organization/offices/common-resolvers/office.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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class OfficeResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the office data.

src/app/organization/offices/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 { OrganizationService } from '../../organization.service';
  */
 @Injectable()
 export class OfficesResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the offices data.

src/app/organization/offices/create-office/create-office.component.html

@@ -6,23 +6,29 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input required matInput formControlName="name" />
-            <mat-error *ngIf="officeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (officeForm.controls.name.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>
             <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
             <mat-select required formControlName="parentId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (officeForm.controls.parentId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="openedOnDatePicker.open()">
@@ -37,10 +43,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="openedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (officeForm.controls.openingDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>

src/app/organization/offices/create-office/create-office.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';
 
@@ -27,6 +27,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateOfficeComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private popoverService = inject(PopoverService);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  dialog = inject(MatDialog);
+
   /** Office form. */
   officeForm: UntypedFormGroup;
   /** Office Data */
@@ -53,17 +63,7 @@ export class CreateOfficeComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private popoverService: PopoverService,
-    private configurationWizardService: ConfigurationWizardService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });

src/app/organization/offices/edit-office/edit-office.component.html

@@ -6,24 +6,32 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="officeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (officeForm.controls.name.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 *ngIf="officeForm.contains('parentId')">
-            <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
-            <mat-select required formControlName="parentId">
-              <mat-option *ngFor="let office of officeData.allowedParents" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (officeForm.contains('parentId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
+              <mat-select required formControlName="parentId">
+                @for (office of officeData.allowedParents; track office) {
+                  <mat-option [value]="office.id">
+                    {{ office.name }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (officeForm.controls.parentId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field (click)="openingDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
@@ -37,10 +45,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="openingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingDatePicker></mat-datepicker>
-            <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (officeForm.controls.openingDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>

src/app/organization/offices/edit-office/edit-office.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditOfficeComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+
   /** Selected Data. */
   officeData: any;
   /** Office form. */
@@ -40,14 +47,7 @@ export class EditOfficeComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    * @param {Dates} dateUtils Date Utils
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { officeTemplate: any }) => {
       this.officeData = data.officeTemplate;
     });

src/app/organization/offices/offices.component.html

@@ -117,55 +117,59 @@
       </mat-card>
     </div>
 
-    <div class="flex-48" *ngIf="office">
-      <mat-card>
-        <mat-card-content>
-          <div class="layout-row">
-            <mat-card-title>
-              {{ office.name }}
-            </mat-card-title>
-
-            <div class="flex align-end">
-              <button mat-icon-button (click)="closeOffice()">
-                <fa-icon icon="times"></fa-icon>
-              </button>
-            </div>
-          </div>
-
-          <mat-tab-group>
-            <mat-tab label="General">
-              <div class="layout-row-wrap">
-                <div class="flex-50 mat-body-strong" *ngIf="office.parentId">
-                  {{ 'Parent Office' | translate }}
-                </div>
-
-                <div class="flex-50" *ngIf="office.parentId">
-                  {{ office.parentName }}
-                </div>
-
-                <div class="flex-50 mat-body-strong">
-                  {{ ' Opened On' | translate }}
-                </div>
-
-                <div class="flex-50">
-                  {{ office.openingDate | date }}
-                </div>
-
-                <div class="flex-50 mat-body-strong" *ngIf="office.externalId">
-                  {{ 'External Id' | translate }}
-                </div>
-
-                <div class="flex-50" *ngIf="office.externalId">
-                  <mifosx-external-identifier externalId="{{ office.externalId }}"></mifosx-external-identifier>
-                </div>
+    @if (office) {
+      <div class="flex-48">
+        <mat-card>
+          <mat-card-content>
+            <div class="layout-row">
+              <mat-card-title>
+                {{ office.name }}
+              </mat-card-title>
+              <div class="flex align-end">
+                <button mat-icon-button (click)="closeOffice()">
+                  <fa-icon icon="times"></fa-icon>
+                </button>
               </div>
-            </mat-tab>
-
-            <mat-tab *ngFor="let dataTable of dataTablesData" label="{{ dataTable.registeredTableName }}"></mat-tab>
-          </mat-tab-group>
-        </mat-card-content>
-      </mat-card>
-    </div>
+            </div>
+            <mat-tab-group>
+              <mat-tab label="General">
+                <div class="layout-row-wrap">
+                  @if (office.parentId) {
+                    <div class="flex-50 mat-body-strong">
+                      {{ 'Parent Office' | translate }}
+                    </div>
+                  }
+                  @if (office.parentId) {
+                    <div class="flex-50">
+                      {{ office.parentName }}
+                    </div>
+                  }
+                  <div class="flex-50 mat-body-strong">
+                    {{ ' Opened On' | translate }}
+                  </div>
+                  <div class="flex-50">
+                    {{ office.openingDate | date }}
+                  </div>
+                  @if (office.externalId) {
+                    <div class="flex-50 mat-body-strong">
+                      {{ 'External Id' | translate }}
+                    </div>
+                  }
+                  @if (office.externalId) {
+                    <div class="flex-50">
+                      <mifosx-external-identifier externalId="{{ office.externalId }}"></mifosx-external-identifier>
+                    </div>
+                  }
+                </div>
+              </mat-tab>
+              @for (dataTable of dataTablesData; track dataTable) {
+                <mat-tab label="{{ dataTable.registeredTableName }}"></mat-tab>
+              }
+            </mat-tab-group>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    }
   </div>
 </div>
 

src/app/organization/offices/offices.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 {
@@ -41,7 +41,7 @@ import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatCard, MatCardContent, MatCardTitle } from '@angular/material/card';
-import { NgIf, NgFor, DatePipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { MatTabGroup, MatTab } from '@angular/material/tabs';
 import { ExternalIdentifierComponent } from '../../shared/external-identifier/external-identifier.component';
 import { DateFormatPipe } from '../../pipes/date-format.pipe';
@@ -88,6 +88,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class OfficesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private officeTreeService = inject(OfficeTreeService);
+  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');
 
@@ -135,14 +142,9 @@ export class OfficesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private officeTreeService: OfficeTreeService,
-    private treeControlService: TreeControlService,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {
+  constructor() {
+    const officeTreeService = this.officeTreeService;
+
     this.route.data.subscribe((data: { offices: any; officeDataTables: any }) => {
       this.officesData = data.offices;
       officeTreeService.initialize(this.officesData);

src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EntityDatatableTabComponent } from '../../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -17,6 +17,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableTabsComponent {
+  private route = inject(ActivatedRoute);
+
   entityId: string;
   /** Office Datatable */
   entityDatatable: any;
@@ -27,7 +29,7 @@ export class DatatableTabsComponent {
    * Fetches data table data from `resolve`
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.entityId = this.route.parent.parent.snapshot.paramMap.get('officeId');
 
     this.route.data.subscribe((data: { officeDatatable: any }) => {

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -19,12 +19,16 @@
     <hr class="section-divider" />
 
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
-    <div class="flex-50 right" *ngIf="officeData.externalId">
-      <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
-    </div>
-    <div class="flex-50 right" *ngIf="!officeData.externalId">
-      {{ 'labels.inputs.Unassigned' | translate }}
-    </div>
+    @if (officeData.externalId) {
+      <div class="flex-50 right">
+        <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
+      </div>
+    }
+    @if (!officeData.externalId) {
+      <div class="flex-50 right">
+        {{ 'labels.inputs.Unassigned' | translate }}
+      </div>
+    }
   </div>
 
   <div class="bottom-button-container small-buttons">

src/app/organization/offices/view-office/general-tab/general-tab.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 { ExternalIdentifierComponent } from '../../../../shared/external-identifier/external-identifier.component';
@@ -21,6 +21,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+
   /** Office data */
   officeData: any;
 
@@ -28,7 +30,7 @@ export class GeneralTabComponent {
    * Fetches office data from `resolve`
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { office: any }) => {
       this.officeData = data.office;
     });

src/app/organization/offices/view-office/view-office.component.html

@@ -12,19 +12,21 @@
         >
           {{ 'labels.inputs.General' | translate }}
         </a>
-        <span *ngFor="let officeDatatable of officeDatatables">
-          <a
-            mat-tab-link
-            *mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
-            [routerLink]="['./datatables', officeDatatable.registeredTableName]"
-            routerLinkActive
-            #datatable="routerLinkActive"
-            [active]="datatable.isActive"
-            class="compact-tab"
-          >
-            {{ officeDatatable.registeredTableName }}
-          </a>
-        </span>
+        @for (officeDatatable of officeDatatables; track officeDatatable) {
+          <span>
+            <a
+              mat-tab-link
+              *mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
+              [routerLink]="['./datatables', officeDatatable.registeredTableName]"
+              routerLinkActive
+              #datatable="routerLinkActive"
+              [active]="datatable.isActive"
+              class="compact-tab"
+            >
+              {{ officeDatatable.registeredTableName }}
+            </a>
+          </span>
+        }
       </nav>
 
       <mat-tab-nav-panel #tabPanel class="tab-panel">

src/app/organization/offices/view-office/view-office.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -21,6 +21,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewOfficeComponent {
+  private route = inject(ActivatedRoute);
+
   /** Office datatables data */
   officeDatatables: any;
 
@@ -28,7 +30,7 @@ export class ViewOfficeComponent {
    * Fetches office datatables from `resolve`
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { officeDatatables: any }) => {
       this.officeDatatables = data.officeDatatables;
     });

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

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

src/app/organization/organization.component.html

@@ -12,24 +12,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Manage Offices' | translate }}
-                    <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['offices']" class="menu-explanation">
-                      {{ 'labels.text.Add new office or modify or deactivate office' | translate }}
-                    </p>
+                    @if (arrowBooleans[0]) {
+                      <p matLine [routerLink]="['offices']" class="menu-explanation">
+                        {{ 'labels.text.Add new office or modify or deactivate office' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(0)"
-                    *ngIf="!arrowBooleans[0]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(0)"
-                    *ngIf="arrowBooleans[0]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[0]) {
+                    <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[0]) {
+                    <fa-icon (click)="arrowBooleansToggle(0)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -44,24 +40,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Manage Holidays' | translate }}
-                    <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['holidays']" class="menu-explanation">
-                      {{ 'labels.text.Define holidays for office' | translate }}
-                    </p>
+                    @if (arrowBooleans[1]) {
+                      <p matLine [routerLink]="['holidays']" class="menu-explanation">
+                        {{ 'labels.text.Define holidays for office' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(1)"
-                    *ngIf="!arrowBooleans[1]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(1)"
-                    *ngIf="arrowBooleans[1]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[1]) {
+                    <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[1]) {
+                    <fa-icon (click)="arrowBooleansToggle(1)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -76,24 +68,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Manage Employees' | translate }}
-                    <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['employees']" class="menu-explanation">
-                      {{ 'labels.text.Employee represents loan officers' | translate }}
-                    </p>
+                    @if (arrowBooleans[2]) {
+                      <p matLine [routerLink]="['employees']" class="menu-explanation">
+                        {{ 'labels.text.Employee represents loan officers' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(2)"
-                    *ngIf="!arrowBooleans[2]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(2)"
-                    *ngIf="arrowBooleans[2]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[2]) {
+                    <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[2]) {
+                    <fa-icon (click)="arrowBooleansToggle(2)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -108,29 +96,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Standing Instructions History' | translate }}
-                    <p
-                      matLine
-                      *ngIf="arrowBooleans[3]"
-                      [routerLink]="['standing-instructions-history']"
-                      class="menu-explanation"
-                    >
-                      {{ 'labels.text.View logged history' | translate }}
-                    </p>
+                    @if (arrowBooleans[3]) {
+                      <p matLine [routerLink]="['standing-instructions-history']" class="menu-explanation">
+                        {{ 'labels.text.View logged history' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(3)"
-                    *ngIf="!arrowBooleans[3]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(3)"
-                    *ngIf="arrowBooleans[3]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[3]) {
+                    <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[3]) {
+                    <fa-icon (click)="arrowBooleansToggle(3)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -145,24 +124,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.text.Investors' | translate }}
-                    <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['investors']" class="menu-explanation">
-                      {{ 'labels.text.View the loan account details associated with the investors' | translate }}
-                    </p>
+                    @if (arrowBooleans[4]) {
+                      <p matLine [routerLink]="['investors']" class="menu-explanation">
+                        {{ 'labels.text.View the loan account details associated with the investors' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(4)"
-                    *ngIf="!arrowBooleans[4]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(4)"
-                    *ngIf="arrowBooleans[4]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[4]) {
+                    <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[4]) {
+                    <fa-icon (click)="arrowBooleansToggle(4)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -177,24 +152,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Fund Mapping' | translate }}
-                    <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['fund-mapping']" class="menu-explanation">
-                      {{ 'labels.text.Bulk entry screen for mapping' | translate }}
-                    </p>
+                    @if (arrowBooleans[5]) {
+                      <p matLine [routerLink]="['fund-mapping']" class="menu-explanation">
+                        {{ 'labels.text.Bulk entry screen for mapping' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(5)"
-                    *ngIf="!arrowBooleans[5]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(5)"
-                    *ngIf="arrowBooleans[5]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[5]) {
+                    <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[5]) {
+                    <fa-icon (click)="arrowBooleansToggle(5)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -209,29 +180,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Password Preferences' | translate }}
-                    <p
-                      matLine
-                      *ngIf="arrowBooleans[6]"
-                      [routerLink]="['password-preferences']"
-                      class="menu-explanation"
-                    >
-                      {{ 'labels.text.The usage of stronger passwords' | translate }}
-                    </p>
+                    @if (arrowBooleans[6]) {
+                      <p matLine [routerLink]="['password-preferences']" class="menu-explanation">
+                        {{ 'labels.text.The usage of stronger passwords' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(6)"
-                    *ngIf="!arrowBooleans[6]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(6)"
-                    *ngIf="arrowBooleans[6]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[6]) {
+                    <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[6]) {
+                    <fa-icon (click)="arrowBooleansToggle(6)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -246,29 +208,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Loan Provisioning Criteria' | translate }}
-                    <p
-                      matLine
-                      *ngIf="arrowBooleans[7]"
-                      [routerLink]="['provisioning-criteria']"
-                      class="menu-explanation"
-                    >
-                      {{ 'labels.text.Loan Provisioning Criteria Organization' | translate }}
-                    </p>
+                    @if (arrowBooleans[7]) {
+                      <p matLine [routerLink]="['provisioning-criteria']" class="menu-explanation">
+                        {{ 'labels.text.Loan Provisioning Criteria Organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(7)"
-                    *ngIf="!arrowBooleans[7]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(7)"
-                    *ngIf="arrowBooleans[7]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[7]) {
+                    <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[7]) {
+                    <fa-icon (click)="arrowBooleansToggle(7)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -283,29 +236,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Entity Data Table Checks' | translate }}
-                    <p
-                      matLine
-                      *ngIf="arrowBooleans[8]"
-                      [routerLink]="['entity-data-table-checks']"
-                      class="menu-explanation"
-                    >
-                      {{ 'labels.text.Entity Data Table Checks Organization' | translate }}
-                    </p>
+                    @if (arrowBooleans[8]) {
+                      <p matLine [routerLink]="['entity-data-table-checks']" class="menu-explanation">
+                        {{ 'labels.text.Entity Data Table Checks Organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(8)"
-                    *ngIf="!arrowBooleans[8]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(8)"
-                    *ngIf="arrowBooleans[8]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[8]) {
+                    <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[8]) {
+                    <fa-icon (click)="arrowBooleansToggle(8)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -324,24 +268,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Currency Configuration' | translate }}
-                    <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['currencies']" class="menu-explanation">
-                      {{ 'labels.text.Currencies available across organization' | translate }}
-                    </p>
+                    @if (arrowBooleans[9]) {
+                      <p matLine [routerLink]="['currencies']" class="menu-explanation">
+                        {{ 'labels.text.Currencies available across organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(9)"
-                    *ngIf="!arrowBooleans[9]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(9)"
-                    *ngIf="arrowBooleans[9]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[9]) {
+                    <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[9]) {
+                    <fa-icon (click)="arrowBooleansToggle(9)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -356,24 +296,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Manage Funds' | translate }}
-                    <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-funds']" class="menu-explanation">
-                      {{ 'labels.text.Funds are associated with loans' | translate }}
-                    </p>
+                    @if (arrowBooleans[10]) {
+                      <p matLine [routerLink]="['manage-funds']" class="menu-explanation">
+                        {{ 'labels.text.Funds are associated with loans' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(10)"
-                    *ngIf="!arrowBooleans[10]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(10)"
-                    *ngIf="arrowBooleans[10]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[10]) {
+                    <fa-icon (click)="arrowBooleansToggle(10)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[10]) {
+                    <fa-icon (click)="arrowBooleansToggle(10)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -388,24 +324,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Bulk Loan Reassignment' | translate }}
-                    <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['bulkloan']" class="menu-explanation">
-                      {{ 'labels.text.Easy way to reassign all the loan' | translate }}
-                    </p>
+                    @if (arrowBooleans[11]) {
+                      <p matLine [routerLink]="['bulkloan']" class="menu-explanation">
+                        {{ 'labels.text.Easy way to reassign all the loan' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(11)"
-                    *ngIf="!arrowBooleans[11]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(11)"
-                    *ngIf="arrowBooleans[11]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[11]) {
+                    <fa-icon (click)="arrowBooleansToggle(11)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[11]) {
+                    <fa-icon (click)="arrowBooleansToggle(11)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -420,24 +352,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Teller / Cashier Management' | translate }}
-                    <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['tellers']" class="menu-explanation">
-                      {{ 'labels.text.Manage Tellers / Cashiers' | translate }}
-                    </p>
+                    @if (arrowBooleans[12]) {
+                      <p matLine [routerLink]="['tellers']" class="menu-explanation">
+                        {{ 'labels.text.Manage Tellers / Cashiers' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(12)"
-                    *ngIf="!arrowBooleans[12]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(12)"
-                    *ngIf="arrowBooleans[12]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[12]) {
+                    <fa-icon (click)="arrowBooleansToggle(12)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[12]) {
+                    <fa-icon (click)="arrowBooleansToggle(12)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -452,24 +380,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Working Days' | translate }}
-                    <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['working-days']" class="menu-explanation">
-                      {{ 'labels.text.Working days and configure behaviour of payments' | translate }}
-                    </p>
+                    @if (arrowBooleans[13]) {
+                      <p matLine [routerLink]="['working-days']" class="menu-explanation">
+                        {{ 'labels.text.Working days and configure behaviour of payments' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(13)"
-                    *ngIf="!arrowBooleans[13]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(13)"
-                    *ngIf="arrowBooleans[13]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[13]) {
+                    <fa-icon (click)="arrowBooleansToggle(13)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[13]) {
+                    <fa-icon (click)="arrowBooleansToggle(13)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -484,24 +408,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Payment Type' | translate }}
-                    <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['payment-types']" class="menu-explanation">
-                      {{ 'labels.text.Manage payment types' | translate }}
-                    </p>
+                    @if (arrowBooleans[14]) {
+                      <p matLine [routerLink]="['payment-types']" class="menu-explanation">
+                        {{ 'labels.text.Manage payment types' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(14)"
-                    *ngIf="!arrowBooleans[14]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(14)"
-                    *ngIf="arrowBooleans[14]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[14]) {
+                    <fa-icon (click)="arrowBooleansToggle(14)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[14]) {
+                    <fa-icon (click)="arrowBooleansToggle(14)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -516,24 +436,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.SMS Campaigns' | translate }}
-                    <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['sms-campaigns']" class="menu-explanation">
-                      {{ 'labels.text.Define SMS Campaigns for Organization' | translate }}
-                    </p>
+                    @if (arrowBooleans[15]) {
+                      <p matLine [routerLink]="['sms-campaigns']" class="menu-explanation">
+                        {{ 'labels.text.Define SMS Campaigns for Organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(15)"
-                    *ngIf="!arrowBooleans[15]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(15)"
-                    *ngIf="arrowBooleans[15]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[15]) {
+                    <fa-icon (click)="arrowBooleansToggle(15)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[15]) {
+                    <fa-icon (click)="arrowBooleansToggle(15)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -548,24 +464,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.AdHocQuery' | translate }}
-                    <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['adhoc-query']" class="menu-explanation">
-                      {{ 'labels.text.Define AdHocQuery for Organization' | translate }}
-                    </p>
+                    @if (arrowBooleans[16]) {
+                      <p matLine [routerLink]="['adhoc-query']" class="menu-explanation">
+                        {{ 'labels.text.Define AdHocQuery for Organization' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(16)"
-                    *ngIf="!arrowBooleans[16]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(16)"
-                    *ngIf="arrowBooleans[16]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[16]) {
+                    <fa-icon (click)="arrowBooleansToggle(16)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[16]) {
+                    <fa-icon (click)="arrowBooleansToggle(16)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>
@@ -580,24 +492,20 @@
                   </mat-icon>
                   <div matLine>
                     {{ 'labels.heading.Bulk Import' | translate }}
-                    <p matLine *ngIf="arrowBooleans[17]" [routerLink]="['bulk-import']" class="menu-explanation">
-                      {{ 'labels.text.Bulk data import using excel spreadsheet templates' | translate }}
-                    </p>
+                    @if (arrowBooleans[17]) {
+                      <p matLine [routerLink]="['bulk-import']" class="menu-explanation">
+                        {{ 'labels.text.Bulk data import using excel spreadsheet templates' | translate }}
+                      </p>
+                    }
                   </div>
                 </div>
                 <div class="menu-right-section">
-                  <fa-icon
-                    (click)="arrowBooleansToggle(17)"
-                    *ngIf="!arrowBooleans[17]"
-                    icon="arrow-down"
-                    size="md"
-                  ></fa-icon>
-                  <fa-icon
-                    (click)="arrowBooleansToggle(17)"
-                    *ngIf="arrowBooleans[17]"
-                    icon="arrow-up"
-                    size="md"
-                  ></fa-icon>
+                  @if (!arrowBooleans[17]) {
+                    <fa-icon (click)="arrowBooleansToggle(17)" icon="arrow-down" size="md"></fa-icon>
+                  }
+                  @if (arrowBooleans[17]) {
+                    <fa-icon (click)="arrowBooleansToggle(17)" icon="arrow-up" size="md"></fa-icon>
+                  }
                 </div>
               </div>
             </mat-list-item>

src/app/organization/organization.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 { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
@@ -28,6 +28,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class OrganizationComponent implements AfterViewInit {
+  private activatedRoute = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
   shouldShowFundMapping = false;
   /* Reference of manage offices */
   @ViewChild('office') office: ElementRef<any>;
@@ -56,19 +61,6 @@ export class OrganizationComponent implements AfterViewInit {
   // Initialize an array of 18 boolean values, all set to false
   arrowBooleans: boolean[] = new Array(18).fill(false);
 
-  /**
-   * @param {ActivatedRoute} activatedRoute ActivatedRoute.
-   * @param {Router} router Router.
-   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
-   * @param {PopoverService} popoverService PopoverService.
-   */
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
-  ) {}
-
   /**
    * Popover function
    * @param template TemplateRef<any>.

src/app/organization/organization.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -15,13 +15,8 @@ import { SettingsService } from 'app/settings/settings.service';
   providedIn: 'root'
 })
 export class OrganizationService {
-  /**
-   * @param {HttpClient} http Http Client to send requests.
-   */
-  constructor(
-    private http: HttpClient,
-    private settingsService: SettingsService
-  ) {}
+  private http = inject(HttpClient);
+  private settingsService = inject(SettingsService);
 
   /**
    * @returns {Observable<any>} Loan Provisioning Criteria data

src/app/organization/password-preferences/password-preferences-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 { OrganizationService } from '../organization.service';
  */
 @Injectable()
 export class PasswordPreferencesTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);
 
   /**
    * Returns the password preferences template data.

src/app/organization/password-preferences/password-preferences.component.html

@@ -3,9 +3,11 @@
     <form [formGroup]="passwordPreferencesForm" (ngSubmit)="submit()">
       <mat-card-content>
         <mat-radio-group class="layout-column gap-10px radio-group-spacing" formControlName="validationPolicyId">
-          <mat-radio-button *ngFor="let passwordPreference of passwordPreferencesData" [value]="passwordPreference.id">
-            <span class="description-wrap">{{ passwordPreference.description }}</span>
-          </mat-radio-button>
+          @for (passwordPreference of passwordPreferencesData; track passwordPreference) {
+            <mat-radio-button [value]="passwordPreference.id">
+              <span class="description-wrap">{{ passwordPreference.description }}</span>
+            </mat-radio-button>
+          }
         </mat-radio-group>
       </mat-card-content>
 

src/app/organization/password-preferences/password-preferences.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -22,6 +22,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class PasswordPreferencesComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Password preferences form. */
   passwordPreferencesForm: UntypedFormGroup;
   /** Password preferences data. */
@@ -34,12 +39,7 @@ export class PasswordPreferencesComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { passwordPreferencesTemplate: any }) => {
       this.passwordPreferencesData = data.passwordPreferencesTemplate;
     });

src/app/organization/payment-types/create-payment-type/create-payment-type.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <input required matInput formControlName="name" />
-            <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (paymentTypeForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
@@ -24,13 +26,15 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
             <input required matInput type="number" min="1" formControlName="position" />
-            <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="paymentTypeForm.controls.position.hasError('min')">
-              {{ 'labels.inputs.Position' | translate }} must be a positive number.
-            </mat-error>
+            @if (paymentTypeForm.controls.position.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (paymentTypeForm.controls.position.hasError('min')) {
+              <mat-error> {{ 'labels.inputs.Position' | translate }} must be a positive number. </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/organization/payment-types/create-payment-type/create-payment-type.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';
 
@@ -23,22 +23,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreatePaymentTypeComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   /** Payment Type form. */
   paymentTypeForm: UntypedFormGroup;
 
-  /**
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
-
   /**
    * Creates and sets the payment type form.
    */
@@ -61,7 +53,8 @@ export class CreatePaymentTypeComponent implements OnInit {
         '',
         [
           Validators.required,
-          Validators.min(1)]
+          Validators.min(1)
+        ]
       ]
     });
   }

src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html

@@ -6,10 +6,12 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <input required matInput formControlName="name" />
-            <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (paymentTypeForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
@@ -24,13 +26,15 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
             <input required matInput type="number" min="1" formControlName="position" />
-            <mat-error *ngIf="paymentTypeForm.controls.position.hasError('min')">
-              {{ 'labels.inputs.Position' | translate }} must be a positive number.
-            </mat-error>
-            <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (paymentTypeForm.controls.position.hasError('min')) {
+              <mat-error> {{ 'labels.inputs.Position' | translate }} must be a positive number. </mat-error>
+            }
+            @if (paymentTypeForm.controls.position.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/organization/payment-types/edit-payment-type/edit-payment-type.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';
 
@@ -23,6 +23,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditPaymentTypeComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private organizationService = inject(OrganizationService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   /** Payment Type form. */
   paymentTypeForm: UntypedFormGroup;
   /** Payment Type Data. */
@@ -35,12 +40,7 @@ export class EditPaymentTypeComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private organizationService: OrganizationService,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { paymentType: any }) => {
       this.paymentTypeData = data.paymentType;
     });
@@ -68,7 +68,8 @@ export class EditPaymentTypeComponent implements OnInit {
         this.paymentTypeData.position,
         [
           Validators.required,
-          Validators.min(1)]
+          Validators.min(1)
+        ]
       ]
     });
   }

src/app/organization/payment-types/payment-types.component.html

@@ -34,20 +34,22 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isSystemDefined === true ? 'true text-center' : 'false text-center'">
-            <fa-icon
-              *ngIf="paymentType.isSystemDefined"
-              icon="check-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.Yes' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
-            <fa-icon
-              *ngIf="!paymentType.isSystemDefined"
-              icon="times-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.No' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
+            @if (paymentType.isSystemDefined) {
+              <fa-icon
+                icon="check-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
+            @if (!paymentType.isSystemDefined) {
+              <fa-icon
+                icon="times-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
           </div>
         </td>
       </ng-container>
@@ -56,20 +58,22 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Cash Payment' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isCashPayment === true ? 'true text-center' : 'false text-center'">
-            <fa-icon
-              *ngIf="paymentType.isCashPayment"
-              icon="check-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.Yes' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
-            <fa-icon
-              *ngIf="!paymentType.isCashPayment"
-              icon="times-circle"
-              size="lg"
-              matTooltip="{{ 'tooltips.No' | translate }}"
-              matTooltipPosition="right"
-            ></fa-icon>
+            @if (paymentType.isCashPayment) {
+              <fa-icon
+                icon="check-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
+            @if (!paymentType.isCashPayment) {
+              <fa-icon
+                icon="times-circle"
+                size="lg"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+            }
           </div>
         </td>
       </ng-container>
@@ -82,24 +86,16 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType" class="layout-row">
-          <button
-            mat-button
-            [routerLink]="[paymentType.id, 'edit']"
-            color="primary"
-            *ngIf="!paymentType.isSystemDefined"
-            class="no-wrap"
-          >
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-          </button>
-          <button
-            mat-button
-            (click)="deletePaymentType(paymentType.id)"
-            color="warn"
-            *ngIf="!paymentType.isSystemDefined"
-            class="no-wrap"
-          >
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-          </button>
+          @if (!paymentType.isSystemDefined) {
+            <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" class="no-wrap">
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+            </button>
+          }
+          @if (!paymentType.isSystemDefined) {
+            <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" class="no-wrap">
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+            </button>
+          }
         </td>
       </ng-container>
 

src/app/organization/payment-types/payment-types.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -54,6 +54,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class PaymentTypesComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+  private dialog = inject(MatDialog);
+
   /** Payment Types data. */
   paymentTypesData: any;
   /** Columns to be displayed in payment types table. */
@@ -80,11 +84,7 @@ export class PaymentTypesComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute,
-    private dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { paymentTypes: any }) => {
       this.paymentTypesData = data.paymentTypes;
     });