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.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -70,22 +70,24 @@
          {{ 'labels.inputs.Manual Entries Allowed' | translate }}
        </th>
        <td mat-cell *matCellDef="let glAccount">
-          <fa-icon
-            *ngIf="glAccount.manualEntriesAllowed"
-            class="manual-entries-allowed"
-            matTooltip="{{ 'tooltips.Allowed' | translate }}"
-            matTooltipPosition="right"
-            icon="check-circle"
-            size="lg"
-          ></fa-icon>
-          <fa-icon
-            *ngIf="!glAccount.manualEntriesAllowed"
-            class="manual-entries-not-allowed"
-            matTooltip="{{ 'tooltips.' | translate }}"
-            matTooltipPosition="right"
-            icon="times-circle"
-            size="lg"
-          ></fa-icon>
+          @if (glAccount.manualEntriesAllowed) {
+            <fa-icon
+              class="manual-entries-allowed"
+              matTooltip="{{ 'tooltips.Allowed' | translate }}"
+              matTooltipPosition="right"
+              icon="check-circle"
+              size="lg"
+            ></fa-icon>
+          }
+          @if (!glAccount.manualEntriesAllowed) {
+            <fa-icon
+              class="manual-entries-not-allowed"
+              matTooltip="{{ 'tooltips.' | translate }}"
+              matTooltipPosition="right"
+              icon="times-circle"
+              size="lg"
+            ></fa-icon>
+          }
        </td>
      </ng-container>

@@ -123,7 +125,9 @@
          <li class="mat-tree-node">
            <button mat-icon-button disabled></button>
            <span (click)="viewGLAccountNode(node)">
-              <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+              @if (node.glCode) {
+                <span class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+              }
              {{ node.name }}
            </span>
          </li>
@@ -139,7 +143,9 @@
                ></fa-icon>
              </button>
              <span (click)="viewGLAccountNode(node)">
-                <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+                @if (node.glCode) {
+                  <span class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
+                }
                {{ node.name }}
              </span>
            </div>
@@ -151,61 +157,52 @@
      </mat-tree>
    </div>

-    <div class="flex-48" *ngIf="glAccount">
-      <mat-card>
-        <mat-card-content>
-          <div class="layout-row-wrap">
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Account Name' | translate }}
+    @if (glAccount) {
+      <div class="flex-48">
+        <mat-card>
+          <mat-card-content>
+            <div class="layout-row-wrap">
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Name' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.name }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.GL Code' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.glCode }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Type' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Account Usage' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.usage }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Manual Entries Allowed' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.manualEntriesAllowed }}
+              </div>
+              <div class="flex-50 header">
+                {{ 'labels.inputs.Description' | translate }}
+              </div>
+              <div class="flex-50">
+                {{ glAccount.description }}
+              </div>
            </div>
-
-            <div class="flex-50">
-              {{ glAccount.name }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.GL Code' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.glCode }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Account Type' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Account Usage' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.usage }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.manualEntriesAllowed }}
-            </div>
-
-            <div class="flex-50 header">
-              {{ 'labels.inputs.Description' | translate }}
-            </div>
-
-            <div class="flex-50">
-              {{ glAccount.description }}
-            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    }
  </div>
 </div>

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

 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../accounting.service';
 */
@Injectable()
 export class ChartOfAccountsResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);

  /**
   * Returns the chart of accounts data.
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';

 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { AccountingService } from '../../accounting.service';
 */
@Injectable()
 export class ChartOfAccountsTemplateResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);

  /**
   * Returns the chart of accounts template data.
@@ -6,65 +6,69 @@
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
            <mat-select required formControlName="type">
-              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
-                {{ 'labels.inputs.accounting.' + accountType.value | translate }}
-              </mat-option>
+              @for (accountType of accountTypeData; track accountType) {
+                <mat-option [value]="accountType.id">
+                  {{ 'labels.inputs.accounting.' + accountType.value | translate }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error
-              *ngIf="
-                glAccountForm.controls.type.hasError('required') &&
-                (glAccountForm.controls.type.touched || glAccountForm.controls.type.dirty)
-              "
-            >
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (
+              glAccountForm.controls.type.hasError('required') &&
+              (glAccountForm.controls.type.touched || glAccountForm.controls.type.dirty)
+            ) {
+              <mat-error>
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
            <input matInput required formControlName="name" />
-            <mat-error
-              *ngIf="
-                glAccountForm.controls.name.hasError('required') &&
-                (glAccountForm.controls.name.touched || glAccountForm.controls.name.dirty)
-              "
-            >
-              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (
+              glAccountForm.controls.name.hasError('required') &&
+              (glAccountForm.controls.name.touched || glAccountForm.controls.name.dirty)
+            ) {
+              <mat-error>
+                {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
            <mat-select required formControlName="usage">
-              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
-                {{ accountUsage.value }}
-              </mat-option>
+              @for (accountUsage of accountUsageData; track accountUsage) {
+                <mat-option [value]="accountUsage.id">
+                  {{ accountUsage.value }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error
-              *ngIf="
-                glAccountForm.controls.usage.hasError('required') &&
-                (glAccountForm.controls.usage.touched || glAccountForm.controls.usage.dirty)
-              "
-            >
-              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (
+              glAccountForm.controls.usage.hasError('required') &&
+              (glAccountForm.controls.usage.touched || glAccountForm.controls.usage.dirty)
+            ) {
+              <mat-error>
+                {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
            <input matInput required formControlName="glCode" />
-            <mat-error
-              *ngIf="
-                glAccountForm.controls.glCode.hasError('required') &&
-                (glAccountForm.controls.glCode.touched || glAccountForm.controls.glCode.dirty)
-              "
-            >
-              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (
+              glAccountForm.controls.glCode.hasError('required') &&
+              (glAccountForm.controls.glCode.touched || glAccountForm.controls.glCode.dirty)
+            ) {
+              <mat-error>
+                {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mifosx-gl-account-selector
@@ -79,9 +83,11 @@
          <mat-form-field class="flex-28">
            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
            <mat-select formControlName="tagId">
-              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
-                {{ tag.name }}
-              </mat-option>
+              @for (tag of tagData; track tag) {
+                <mat-option [value]="tag.id">
+                  {{ tag.name }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -32,6 +32,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  dialog = inject(MatDialog);
+
  /** GL account form. */
  glAccountForm: UntypedFormGroup;
  /** Chart of accounts data. */
@@ -66,15 +74,7 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   * @param {PopoverService} popoverService PopoverService.
   * @param {Matdialog} dialog Matdialog.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
    this.route.queryParamMap.subscribe((params) => {
      this.accountTypeId = Number(params.get('accountType'));
      this.parentId = Number(params.get('parent'));
@@ -6,45 +6,57 @@
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
            <mat-select required formControlName="type">
-              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
-                {{ accountType.value }}
-              </mat-option>
+              @for (accountType of accountTypeData; track accountType) {
+                <mat-option [value]="accountType.id">
+                  {{ accountType.value }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (glAccountForm.controls.type.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
            <input matInput required formControlName="name" />
-            <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (glAccountForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
            <mat-select required formControlName="usage">
-              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
-                {{ accountUsage.value }}
-              </mat-option>
+              @for (accountUsage of accountUsageData; track accountUsage) {
+                <mat-option [value]="accountUsage.id">
+                  {{ accountUsage.value }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (glAccountForm.controls.usage.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
            <input matInput required formControlName="glCode" />
-            <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (glAccountForm.controls.glCode.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mifosx-gl-account-selector
@@ -59,9 +71,11 @@
          <mat-form-field class="flex-28">
            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
            <mat-select formControlName="tagId">
-              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
-                {{ tag.name }}
-              </mat-option>
+              @for (tag of tagData; track tag) {
+                <mat-option [value]="tag.id">
+                  {{ tag.name }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

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

 /** rxjs Imports */
@@ -14,10 +14,7 @@ import { AccountingService } from '../accounting.service';
 */
@Injectable()
 export class GlAccountAndChartOfAccountsTemplateResolver {
-  /**
-   * @param {AccountingService} accountingService Accounting service.
-   */
-  constructor(private accountingService: AccountingService) {}
+  private accountingService = inject(AccountingService);

  /**
   * Returns the gl account and chart of accounts template data.
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';

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

-  constructor(private translateService: TranslateService) {}
-
  /**
   * Builds the chart of accounts tree and emits the value.
   * @param {any} glAccountData Chart of accounts data.
@@ -1,15 +1,16 @@
 <div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
  <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
-    <button
-      mat-raised-button
-      color="primary"
-      *ngIf="glAccount.usage.value === 'HEADER'"
-      [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
-      [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
-    >
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Subledger Account' | translate }}
-    </button>
+    @if (glAccount.usage.value === 'HEADER') {
+      <button
+        mat-raised-button
+        color="primary"
+        [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
+        [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Subledger Account' | translate }}
+      </button>
+    }
  </span>

  <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
@@ -20,17 +21,21 @@
  </span>

  <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Disable' | translate }}
-    </button>
+    @if (!glAccount.disabled) {
+      <button mat-raised-button color="warn" (click)="changeGlAccountState()">
+        <fa-icon icon="lock" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Disable' | translate }}
+      </button>
+    }
  </span>

  <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
-    <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Enable' | translate }}
-    </button>
+    @if (glAccount.disabled) {
+      <button mat-raised-button color="accent" (click)="changeGlAccountState()">
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Enable' | translate }}
+      </button>
+    }
  </span>

  <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
@@ -54,22 +59,26 @@
          <div class="value">{{ glAccount.glCode }}</div>
        </div>

-        <div class="content-row" *ngIf="glAccount.parent">
-          <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
-          <div class="value">
-            <a
-              class="tab-link"
-              [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
-            >
-              <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
-            </a>
+        @if (glAccount.parent) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
+            <div class="value">
+              <a
+                class="tab-link"
+                [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
+              >
+                <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
+              </a>
+            </div>
          </div>
-        </div>
+        }

-        <div class="content-row" *ngIf="glAccount.tagId.id">
-          <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
-          <div class="value">{{ glAccount.tagId.name }}</div>
-        </div>
+        @if (glAccount.tagId.id) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
+            <div class="value">{{ glAccount.tagId.name }}</div>
+          </div>
+        }

        <div class="content-row">
          <div class="label">{{ 'labels.inputs.Account Usage' | translate }}</div>
@@ -81,10 +90,12 @@
          <div class="value">{{ glAccount.manualEntriesAllowed | yesNo }}</div>
        </div>

-        <div class="content-row" *ngIf="glAccount.description">
-          <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
-          <div class="value">{{ glAccount.description }}</div>
-        </div>
+        @if (glAccount.description) {
+          <div class="content-row">
+            <div class="label">{{ 'labels.inputs.Description' | translate }}</div>
+            <div class="value">{{ glAccount.description }}</div>
+          </div>
+        }
      </div>
    </mat-card-content>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';

@@ -8,7 +8,7 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial

 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { Location, NgIf } from '@angular/common';
+import { Location } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { GlAccountDisplayComponent } from '../../../shared/accounting/gl-account-display/gl-account-display.component';
 import { YesnoPipe } from '../../../pipes/yesno.pipe';
@@ -29,6 +29,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewGlAccountComponent {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private location = inject(Location);
+
  /** GL Account. */
  glAccount: any;

@@ -39,13 +45,7 @@ export class ViewGlAccountComponent {
   * @param {Router} router Router for navigation.
   * @param {MatDialog} dialog Dialog reference.
   */
-  constructor(
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private location: Location
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
      this.glAccount = data.glAccountAndChartOfAccountsTemplate;
    });