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
@@ -6,46 +6,50 @@
          <mat-form-field class="flex-100">
            <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
            <input matInput required formControlName="reportName" />
-            <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
            <mat-select required formControlName="reportType">
-              <mat-option
-                *ngFor="let allowedReportType of reportTemplateData.allowedReportTypes"
-                [value]="allowedReportType"
-              >
-                {{ allowedReportType | translateKey: 'text' }}
-              </mat-option>
+              @for (allowedReportType of reportTemplateData.allowedReportTypes; track allowedReportType) {
+                <mat-option [value]="allowedReportType">
+                  {{ allowedReportType | translateKey: 'text' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportType.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
            <mat-select formControlName="reportSubType">
-              <mat-option
-                *ngFor="let allowedReportSubType of reportTemplateData.allowedReportSubTypes"
-                [value]="allowedReportSubType"
-              >
-                {{ allowedReportSubType | translateKey: 'text' }}
-              </mat-option>
+              @for (allowedReportSubType of reportTemplateData.allowedReportSubTypes; track allowedReportSubType) {
+                <mat-option [value]="allowedReportSubType">
+                  {{ allowedReportSubType | translateKey: 'text' }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
            <mat-select formControlName="reportCategory">
-              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions" [value]="reportCategoryType">
-                {{ reportCategoryType | translateKey: 'catalogs' }}
-              </mat-option>
+              @for (reportCategoryType of reportCategoryTypeOptions; track reportCategoryType) {
+                <mat-option [value]="reportCategoryType">
+                  {{ reportCategoryType | translateKey: 'catalogs' }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

@@ -69,10 +73,12 @@
              cdkTextareaAutosize
              cdkAutosizeMinRows="6"
            ></textarea>
-            <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-              {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportSql.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -61,6 +61,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CreateReportComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateServices = inject(TranslateService);
+
  /** Report Form. */
  reportForm: UntypedFormGroup;
  /** Report Template Data. */
@@ -103,14 +110,7 @@ export class CreateReportComponent implements OnInit {
   * @param {MatDialog} dialog Dialog Reference.
   * @param {TranslateService} translateService Translate Service.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateServices: TranslateService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { reportTemplate: any }) => {
      this.reportTemplateData = data.reportTemplate;
      this.dataForDialog.allowedParameters = this.reportTemplateData.allowedParameters;
@@ -6,43 +6,50 @@
          <mat-form-field class="flex-100">
            <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
            <input matInput required formControlName="reportName" />
-            <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
            <mat-select required formControlName="reportType">
-              <mat-option *ngFor="let allowedReportType of reportData.allowedReportTypes" [value]="allowedReportType">
-                {{ allowedReportType | translateKey: 'text' }}
-              </mat-option>
+              @for (allowedReportType of reportData.allowedReportTypes; track allowedReportType) {
+                <mat-option [value]="allowedReportType">
+                  {{ allowedReportType | translateKey: 'text' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportType.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
            <mat-select formControlName="reportSubType">
-              <mat-option
-                *ngFor="let allowedReportSubType of reportData.allowedReportSubTypes"
-                [value]="allowedReportSubType"
-              >
-                {{ allowedReportSubType | translateKey: 'text' }}
-              </mat-option>
+              @for (allowedReportSubType of reportData.allowedReportSubTypes; track allowedReportSubType) {
+                <mat-option [value]="allowedReportSubType">
+                  {{ allowedReportSubType | translateKey: 'text' }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

          <mat-form-field class="flex-50">
            <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
            <mat-select formControlName="reportCategory">
-              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions" [value]="reportCategoryType">
-                {{ reportCategoryType | translateKey: 'catalogs' }}
-              </mat-option>
+              @for (reportCategoryType of reportCategoryTypeOptions; track reportCategoryType) {
+                <mat-option [value]="reportCategoryType">
+                  {{ reportCategoryType | translateKey: 'catalogs' }}
+                </mat-option>
+              }
            </mat-select>
          </mat-form-field>

@@ -66,10 +73,12 @@
              cdkTextareaAutosize
              cdkAutosizeMinRows="6"
            ></textarea>
-            <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-              {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (reportForm.controls.reportSql.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>

@@ -78,17 +87,12 @@
        <div class="layout-row-wrap gap-60percent layout-lt-md-column">
          <p class="mat-title flex-20">{{ 'labels.inputs.Report Parameters' | translate }}</p>

-          <button
-            mat-raised-button
-            class="flex-20"
-            type="button"
-            *ngIf="!reportData.coreReport"
-            color="primary"
-            (click)="addReportParameter()"
-          >
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Add Report Parameter' | translate }}
-          </button>
+          @if (!reportData.coreReport) {
+            <button mat-raised-button class="flex-20" type="button" color="primary" (click)="addReportParameter()">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Add Report Parameter' | translate }}
+            </button>
+          }
        </div>

        <table mat-table [dataSource]="dataSource" matSort>
@@ -107,26 +111,28 @@
          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
            <td mat-cell *matCellDef="let reportParameter" class="gap-15percent">
-              <button
-                *ngIf="!reportData.coreReport"
-                type="button"
-                class="flex-8"
-                color="primary"
-                mat-icon-button
-                (click)="editReportParameter(reportParameter)"
-              >
-                <fa-icon icon="edit" size="lg"></fa-icon>
-              </button>
-              <button
-                *ngIf="!reportData.coreReport"
-                type="button"
-                class="flex-8"
-                color="warn"
-                mat-icon-button
-                (click)="deleteReportParameter(reportParameter)"
-              >
-                <fa-icon icon="trash" size="lg"></fa-icon>
-              </button>
+              @if (!reportData.coreReport) {
+                <button
+                  type="button"
+                  class="flex-8"
+                  color="primary"
+                  mat-icon-button
+                  (click)="editReportParameter(reportParameter)"
+                >
+                  <fa-icon icon="edit" size="lg"></fa-icon>
+                </button>
+              }
+              @if (!reportData.coreReport) {
+                <button
+                  type="button"
+                  class="flex-8"
+                  color="warn"
+                  mat-icon-button
+                  (click)="deleteReportParameter(reportParameter)"
+                >
+                  <fa-icon icon="trash" size="lg"></fa-icon>
+                </button>
+              }
            </td>
          </ng-container>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -60,6 +60,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditReportComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private systemService = inject(SystemService);
+  private dialog = inject(MatDialog);
+
  /** Report Data. */
  reportData: any;
  /** Report Template Data. */
@@ -106,13 +112,7 @@ export class EditReportComponent implements OnInit {
   * @param {Router} router Router for navigation.
   * @param {MatDialog} dialog Dialog Reference.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private systemService: SystemService,
-    private dialog: MatDialog
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { report: any; reportTemplate: any }) => {
      this.reportData = data.report;
      this.reportParametersData = data.report.reportParameters ? data.report.reportParameters : [];
@@ -177,7 +177,6 @@ export class EditReportComponent implements OnInit {
          disabled: this.reportData.coreReport || this.reportData.reportType === 'Pentaho'
        },
        Validators.required
-
      ]
    });
  }
@@ -40,44 +40,48 @@
      <ng-container matColumnDef="coreReport">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Core Report' | translate }}</th>
        <td mat-cell *matCellDef="let report">
-          <fa-icon
-            *ngIf="report.coreReport"
-            icon="check-circle"
-            size="lg"
-            class="true"
-            [matTooltip]="'tooltips.Yes' | translate"
-            matTooltipPosition="right"
-          ></fa-icon>
-          <fa-icon
-            *ngIf="!report.coreReport"
-            icon="times-circle"
-            size="lg"
-            class="false"
-            [matTooltip]="'tooltips.No' | translate"
-            matTooltipPosition="right"
-          ></fa-icon>
+          @if (report.coreReport) {
+            <fa-icon
+              icon="check-circle"
+              size="lg"
+              class="true"
+              [matTooltip]="'tooltips.Yes' | translate"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
+          @if (!report.coreReport) {
+            <fa-icon
+              icon="times-circle"
+              size="lg"
+              class="false"
+              [matTooltip]="'tooltips.No' | translate"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
        </td>
      </ng-container>

      <ng-container matColumnDef="userReport">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.User Report' | translate }}</th>
        <td mat-cell *matCellDef="let report">
-          <fa-icon
-            *ngIf="report.useReport"
-            icon="check-circle"
-            size="lg"
-            class="true"
-            [matTooltip]="'tooltips.Yes' | translate"
-            matTooltipPosition="right"
-          ></fa-icon>
-          <fa-icon
-            *ngIf="!report.useReport"
-            icon="times-circle"
-            size="lg"
-            class="false"
-            [matTooltip]="'tooltips.No' | translate"
-            matTooltipPosition="right"
-          ></fa-icon>
+          @if (report.useReport) {
+            <fa-icon
+              icon="check-circle"
+              size="lg"
+              class="true"
+              [matTooltip]="'tooltips.Yes' | translate"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
+          @if (!report.useReport) {
+            <fa-icon
+              icon="times-circle"
+              size="lg"
+              class="false"
+              [matTooltip]="'tooltips.No' | translate"
+              matTooltipPosition="right"
+            ></fa-icon>
+          }
        </td>
      </ng-container>

@@ -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 {
@@ -55,6 +55,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ManageReportsComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  private dialog = inject(MatDialog);
+
  /** Reports Data. */
  reportsData: any;
  /** Columns to be displayed in reports table. */
@@ -87,13 +93,7 @@ export class ManageReportsComponent implements OnInit, AfterViewInit {
   * @param {PopoverService} popoverService PopoverService.
   * @param {Matdialog} matdialog Matdialog.
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    private dialog: MatDialog
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { reports: any }) => {
      this.reportsData = data.reports;
    });
@@ -9,14 +9,18 @@
      <mat-form-field>
        <mat-label>{{ 'labels.inputs.Select allowed parameter' | translate }}</mat-label>
        <mat-select required formControlName="parameterName">
-          <mat-option *ngFor="let allowedParameter of data.allowedParameters" [value]="allowedParameter.id">
-            {{ allowedParameter.parameterName }}
-          </mat-option>
+          @for (allowedParameter of data.allowedParameters; track allowedParameter) {
+            <mat-option [value]="allowedParameter.id">
+              {{ allowedParameter.parameterName }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="reportParameterForm.controls.parameterName.hasError('required')">
-          {{ 'labels.inputs.Report Parameters' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (reportParameterForm.controls.parameterName.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Report Parameters' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  MAT_DIALOG_DATA,
  MatDialogRef,
@@ -29,20 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ReportParameterDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ReportParameterDialogComponent>>(MatDialogRef);
+  formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
  /** Report Parameter Form. */
  reportParameterForm: UntypedFormGroup;

-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {any} data Provides the allowed parameters and values for the form (if available).
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ReportParameterDialogComponent>,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
-
  /**
   * Creates the add report parameter form.
   */
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';

 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { SystemService } from '../system.service';
 */
@Injectable()
 export class ReportTemplateResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);

  /**
   * Returns the Report Template data.
@@ -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 { SystemService } from '../system.service';
 */
@Injectable()
 export class ReportResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);

  /**
   * Returns the Report 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 { SystemService } from '../system.service';
 */
@Injectable()
 export class ReportsResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);

  /**
   * Returns the Reports data.
@@ -4,12 +4,14 @@
    {{ 'labels.buttons.Edit' | translate }}
  </button>

-  <span *ngIf="!reportData.coreReport">
-    <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_REPORT'">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Delete' | translate }}
-    </button>
-  </span>
+  @if (!reportData.coreReport) {
+    <span>
+      <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_REPORT'">
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Delete' | translate }}
+      </button>
+    </span>
+  }
 </div>

 <div class="container">
@@ -28,13 +30,15 @@
          {{ reportData.reportType | translateKey: 'text' }}
        </div>

-        <div *ngIf="reportData.reportSubType" class="mat-body-strong flex-50">
-          {{ 'labels.inputs.Report Sub Type' | translate }}:
-        </div>
+        @if (reportData.reportSubType) {
+          <div class="mat-body-strong flex-50">{{ 'labels.inputs.Report Sub Type' | translate }}:</div>
+        }

-        <div *ngIf="reportData.reportSubType" class="flex-50">
-          {{ reportData.reportSubType | translateKey: 'text' }}
-        </div>
+        @if (reportData.reportSubType) {
+          <div class="flex-50">
+            {{ reportData.reportSubType | translateKey: 'text' }}
+          </div>
+        }

        <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Report Category' | translate }}:</div>

@@ -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,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewReportComponent {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private dialog = inject(MatDialog);
+  private router = inject(Router);
+
  /** Report Data. */
  reportData: any;

@@ -38,12 +43,7 @@ export class ViewReportComponent {
   * @param {MatDialog} dialog Dialog Reference.
   * @param {Router} router Router for navigation.
   */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private dialog: MatDialog,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { report: any }) => {
      this.reportData = data.report;
    });