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
@@ -9,44 +9,56 @@
      <mat-form-field>
        <mat-label>{{ 'labels.inputs.Column Name' | translate }}</mat-label>
        <input matInput required formControlName="name" placeholder="{{ 'labels.inputs.Column Name' | translate }}" />
-        <mat-error *ngIf="columnForm.controls.name.hasError('required')">
-          {{ 'labels.inputs.Column Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (columnForm.controls.name.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Column Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field>
        <mat-label>{{ 'labels.inputs.Column Type' | translate }}</mat-label>
        <mat-select required formControlName="type">
-          <mat-option *ngFor="let columnType of columnTypeData" [value]="columnType.value">
-            {{ columnType.displayValue | translateKey: 'inputs' }}
-          </mat-option>
+          @for (columnType of columnTypeData; track columnType) {
+            <mat-option [value]="columnType.value">
+              {{ columnType.displayValue | translateKey: 'inputs' }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="columnForm.controls.type.hasError('required')">
-          {{ 'labels.inputs.Column Type' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (columnForm.controls.type.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Column Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

-      <mat-form-field *ngIf="columnForm.value.type === 'String'">
-        <mat-label> {{ 'labels.inputs.Column Length' | translate }}</mat-label>
-        <input
-          matInput
-          required
-          type="number"
-          formControlName="length"
-          placeholder="{{ 'labels.inputs.Column Length' | translate }}"
-        />
-      </mat-form-field>
+      @if (columnForm.value.type === 'String') {
+        <mat-form-field>
+          <mat-label> {{ 'labels.inputs.Column Length' | translate }}</mat-label>
+          <input
+            matInput
+            required
+            type="number"
+            formControlName="length"
+            placeholder="{{ 'labels.inputs.Column Length' | translate }}"
+          />
+        </mat-form-field>
+      }

-      <mat-form-field *ngIf="columnForm.value.type === 'Dropdown'">
-        <mat-label> {{ 'labels.inputs.Column Code' | translate }}</mat-label>
-        <mat-select required formControlName="code">
-          <mat-option *ngFor="let columnCode of data.columnCodes" [value]="columnCode.name">
-            {{ columnCode.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      @if (columnForm.value.type === 'Dropdown') {
+        <mat-form-field>
+          <mat-label> {{ 'labels.inputs.Column Code' | translate }}</mat-label>
+          <mat-select required formControlName="code">
+            @for (columnCode of data.columnCodes; track columnCode) {
+              <mat-option [value]="columnCode.name">
+                {{ columnCode.name }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }

      <div>
        <mat-checkbox labelPosition="after" formControlName="mandatory">{{
@@ -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,
@@ -34,22 +34,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ColumnDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ColumnDialogComponent>>(MatDialogRef);
+  formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
  /** Column Form. */
  columnForm: UntypedFormGroup;
  /** Column Type Data */
  columnTypeData = columnTypeData;

-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {any} data Provides the column codes and values for the form (if available).
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ColumnDialogComponent>,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
-
  /**
   * Creates the add column form.
   */
@@ -69,7 +62,6 @@ export class ColumnDialogComponent implements OnInit {
          disabled: this.data.type === 'existing'
        },
        Validators.required
-
      ],
      length: [
        {
@@ -77,7 +69,6 @@ export class ColumnDialogComponent implements OnInit {
          disabled: this.getColumnType(this.data.columnDisplayType) !== 'String' || this.data.type === 'existing'
        },
        Validators.required
-
      ],
      mandatory: [{ value: this.data.isColumnNullable, disabled: this.data.type === 'existing' }],
      unique: [
@@ -89,7 +80,6 @@ export class ColumnDialogComponent implements OnInit {
          disabled: this.getColumnType(this.data.columnDisplayType) !== 'Dropdown' || this.data.type === 'existing'
        },
        Validators.required
-
      ]
    });
    this.onColumnTypeChanges();
@@ -6,42 +6,56 @@
          <mat-form-field class="flex-40">
            <mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
            <input matInput required formControlName="datatableName" />
-            <mat-error *ngIf="dataTableForm.controls.datatableName.hasError('required')">
-              {{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.datatableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-fill flex-20">
            <mat-label>{{ 'labels.inputs.Entity Type' | translate }}</mat-label>
            <mat-select required formControlName="apptableName">
-              <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey: 'inputs' }}
-              </mat-option>
+              @for (appTable of appTableData; track appTable) {
+                <mat-option [value]="appTable.value">
+                  {{ appTable.displayValue | translateKey: 'inputs' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.apptableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
-            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showEntitySubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (entitySubType of entitySubTypeData; track entitySubType) {
+                  <mat-option [value]="entitySubType.value">
+                    {{ entitySubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }

-          <mat-form-field class="flex-fill flex-20" *ngIf="showSavingsSubType">
-            <mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let savingsSubType of savingsSubTypeData" [value]="savingsSubType.value">
-                {{ savingsSubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showSavingsSubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (savingsSubType of savingsSubTypeData; track savingsSubType) {
+                  <mat-option [value]="savingsSubType.value">
+                    {{ savingsSubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }

          <div class="multi-row-wrapper flex-14">
            <mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">{{
@@ -67,14 +81,15 @@
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
            <td mat-cell *matCellDef="let column">
              {{ column.columnName }}
-              <fa-icon
-                *ngIf="column.isColumnPrimaryKey"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Primary Key' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnPrimaryKey) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Primary Key' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -96,22 +111,24 @@
          <ng-container matColumnDef="mandatory">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.text.Mandatory' | translate }}</th>
            <td mat-cell *matCellDef="let column" class="left">
-              <fa-icon
-                *ngIf="!column.isColumnNullable"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="column.isColumnNullable"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (!column.isColumnNullable) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (column.isColumnNullable) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -120,22 +137,24 @@
              {{ 'labels.inputs.Unique' | translate }}
            </th>
            <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnUnique"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnUnique"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                unique="right"
-              ></fa-icon>
+              @if (column.isColumnUnique) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnUnique) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  unique="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -144,22 +163,24 @@
              {{ 'labels.inputs.Indexed' | translate }}
            </th>
            <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnIndexed"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnIndexed"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnIndexed) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnIndexed) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, 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';
@@ -70,6 +70,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CreateDataTableComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private systemService = inject(SystemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+  private translateService = inject(TranslateService);
+
  /** Data Table Form */
  dataTableForm: UntypedFormGroup;
  /** Application Table Data */
@@ -126,16 +135,7 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
   * @param {PopoverService} popoverService PopoverService.
   * @param {TranslateService} translateService Translate Service.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private systemService: SystemService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService,
-    private translateService: TranslateService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { columnCodes: any }) => {
      this.dataForDialog.columnCodes = data.columnCodes;
    });
@@ -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 DataTableResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);

  /**
   * Returns the Data Table data.
@@ -11,24 +11,32 @@
          <mat-form-field class="flex-fill flex-20">
            <mat-label>{{ 'labels.inputs.Application Table Name' | translate }}</mat-label>
            <mat-select required formControlName="apptableName">
-              <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey: 'inputs' }}
-              </mat-option>
+              @for (appTable of appTableData; track appTable) {
+                <mat-option [value]="appTable.value">
+                  {{ appTable.displayValue | translateKey: 'inputs' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (dataTableForm.controls.apptableName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
-            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
-            <mat-select formControlName="entitySubType">
-              <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey: 'inputs' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (showEntitySubType) {
+            <mat-form-field class="flex-fill flex-20">
+              <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
+              <mat-select formControlName="entitySubType">
+                @for (entitySubType of entitySubTypeData; track entitySubType) {
+                  <mat-option [value]="entitySubType.value">
+                    {{ entitySubType.displayValue | translateKey: 'inputs' }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
        </div>

        <br />
@@ -78,22 +86,24 @@
              {{ 'labels.text.Mandatory' | translate }}
            </th>
            <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="!column.isColumnNullable"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="column.isColumnNullable"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (!column.isColumnNullable) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (column.isColumnNullable) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -102,22 +112,24 @@
              {{ 'labels.inputs.Unique' | translate }}
            </th>
            <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnUnique"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnUnique"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                unique="right"
-              ></fa-icon>
+              @if (column.isColumnUnique) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnUnique) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  unique="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -126,22 +138,24 @@
              {{ 'labels.inputs.Indexed' | translate }}
            </th>
            <td mat-cell *matCellDef="let column">
-              <fa-icon
-                *ngIf="column.isColumnIndexed"
-                icon="check-circle"
-                size="lg"
-                class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
-              <fa-icon
-                *ngIf="!column.isColumnIndexed"
-                icon="times-circle"
-                size="lg"
-                class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}"
-                matTooltipPosition="right"
-              ></fa-icon>
+              @if (column.isColumnIndexed) {
+                <fa-icon
+                  icon="check-circle"
+                  size="lg"
+                  class="column-mandatory"
+                  matTooltip="{{ 'tooltips.Yes' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
+              @if (!column.isColumnIndexed) {
+                <fa-icon
+                  icon="times-circle"
+                  size="lg"
+                  class="not-column-mandatory"
+                  matTooltip="{{ 'tooltips.No' | translate }}"
+                  matTooltipPosition="right"
+                ></fa-icon>
+              }
            </td>
          </ng-container>

@@ -150,12 +164,16 @@
              {{ 'labels.inputs.Actions' | translate }}
            </th>
            <td mat-cell *matCellDef="let column" class="center gap-15percent">
-              <button type="button" color="primary" mat-icon-button (click)="editColumn(column)" *ngIf="!column.system">
-                <fa-icon icon="edit" size="lg"></fa-icon>
-              </button>
-              <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)" *ngIf="!column.system">
-                <fa-icon icon="trash" size="lg"></fa-icon>
-              </button>
+              @if (!column.system) {
+                <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
+                  <fa-icon icon="edit" size="lg"></fa-icon>
+                </button>
+              }
+              @if (!column.system) {
+                <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)">
+                  <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 { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -63,6 +63,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditDataTableComponent implements OnInit {
+  private systemService = inject(SystemService);
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
  /** Data Table Form. */
  dataTableForm: UntypedFormGroup;
  /** Data Table Data. */
@@ -144,14 +151,7 @@ export class EditDataTableComponent implements OnInit {
   * @param {FormBuilder} formBuilder Form Builder.
   * @param {MatDialog} dialog Dialog Reference.
   */
-  constructor(
-    private systemService: SystemService,
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { dataTable: any; columnCodes: any }) => {
      this.dataTableData = data.dataTable;

@@ -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 ManageDataTablesComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private configurationWizardService = inject(ConfigurationWizardService);
+  private popoverService = inject(PopoverService);
+
  /** Data table data. */
  dataTableData: any;
  /** Columns to be displayed in manage data tables table. */
@@ -84,12 +89,7 @@ export class ManageDataTablesComponent 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: { dataTables: any }) => {
      this.dataTableData = data.dataTables;
    });
@@ -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 ManageDataTablesResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);

  /**
   * Returns the manage data tables data.
@@ -54,44 +54,48 @@
        {{ 'labels.text.Mandatory' | translate }}
      </th>
      <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="!dataTable.isColumnNullable"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="dataTable.isColumnNullable"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (!dataTable.isColumnNullable) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (dataTable.isColumnNullable) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
      </td>
    </ng-container>

    <ng-container matColumnDef="isColumnUnique">
      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Unique' | translate }}</th>
      <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="dataTable.isColumnUnique"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="!dataTable.isColumnUnique"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (dataTable.isColumnUnique) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (!dataTable.isColumnUnique) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
      </td>
    </ng-container>

@@ -100,22 +104,24 @@
        {{ 'labels.inputs.Indexed' | translate }}
      </th>
      <td mat-cell *matCellDef="let dataTable">
-        <fa-icon
-          *ngIf="dataTable.isColumnIndexed"
-          icon="check-circle"
-          size="lg"
-          class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
-        <fa-icon
-          *ngIf="!dataTable.isColumnIndexed"
-          icon="times-circle"
-          size="lg"
-          class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}"
-          matTooltipPosition="right"
-        ></fa-icon>
+        @if (dataTable.isColumnIndexed) {
+          <fa-icon
+            icon="check-circle"
+            size="lg"
+            class="column-mandatory"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
+        @if (!dataTable.isColumnIndexed) {
+          <fa-icon
+            icon="times-circle"
+            size="lg"
+            class="not-column-mandatory"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        }
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -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';
@@ -55,6 +55,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewDataTableComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
  /** Data Table Data */
  dataTableData: any;
  /** Column Data */
@@ -85,13 +91,7 @@ export class ViewDataTableComponent implements OnInit {
   * @param {MatDialog} dialog Dialog reference.
   *  @param {TranslateService} translateService Translate Service.
   */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { dataTable: any }) => {
      this.dataTableData = data.dataTable;
      this.columnsData = this.dataTableData.columnHeaderData;