Upgrading to Angular 20:

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

src/app/shared/accounting/gl-account-display/gl-account-display.component.html

@@ -1,13 +1,16 @@
-<span class="layout-row" *ngIf="accountTitle">
-  <div [ngClass]="getWithClass(withTitle)" class="header">
-    {{ 'labels.inputs.' + accountTitle | translate }}
-  </div>
+@if (accountTitle) {
+  <span class="layout-row">
+    <div [ngClass]="getWithClass(withTitle)" class="header">
+      {{ 'labels.inputs.' + accountTitle | translate }}
+    </div>
+    <div [ngClass]="getWithClass(withAccount)">
+      {{ glAccountValue() }}
+    </div>
+  </span>
+}
 
-  <div [ngClass]="getWithClass(withAccount)">
+@if (!accountTitle) {
+  <div class="flex-100">
     {{ glAccountValue() }}
   </div>
-</span>
-
-<div class="flex-100" *ngIf="!accountTitle">
-  {{ glAccountValue() }}
-</div>
+}

src/app/shared/accounting/gl-account-display/gl-account-display.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { GLAccount } from 'app/shared/models/general.model';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({

src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html

@@ -1,40 +1,48 @@
 <div class="layout-column m-r-10">
-  <mat-form-field class="flex-100" *ngIf="required">
-    <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  @if (required) {
+    <mat-form-field class="flex-100">
+      <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+      <mat-select required [formControl]="inputFormControl">
+        <mat-option>
+          <ngx-mat-select-search
+            placeholderLabel="{{ placeHolderLabel }}"
+            noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+            [formControl]="filterFormCtrl"
+          ></ngx-mat-select-search>
+        </mat-option>
+        @for (glAccount of glAccountData | async; track glAccount) {
+          <mat-option [value]="glAccount.id">
+            {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
+          </mat-option>
+        }
+      </mat-select>
+      @if (inputFormControl.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
+    </mat-form-field>
+  }
 
-    <mat-select required [formControl]="inputFormControl">
-      <mat-option>
-        <ngx-mat-select-search
-          placeholderLabel="{{ placeHolderLabel }}"
-          noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
-          [formControl]="filterFormCtrl"
-        ></ngx-mat-select-search>
-      </mat-option>
-      <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
-        {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
-      </mat-option>
-    </mat-select>
-    <mat-error *ngIf="inputFormControl.hasError('required')">
-      {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
-      <strong>{{ 'labels.commons.required' | translate }}</strong>
-    </mat-error>
-  </mat-form-field>
-
-  <mat-form-field class="flex-100" *ngIf="!required">
-    <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
-
-    <mat-select [formControl]="inputFormControl">
-      <mat-option>
-        <ngx-mat-select-search
-          [formControl]="filterFormCtrl"
-          placeholderLabel="{{ placeHolderLabel }}"
-          noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
-        >
-        </ngx-mat-select-search>
-      </mat-option>
-      <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
-        {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+  @if (!required) {
+    <mat-form-field class="flex-100">
+      <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+      <mat-select [formControl]="inputFormControl">
+        <mat-option>
+          <ngx-mat-select-search
+            [formControl]="filterFormCtrl"
+            placeholderLabel="{{ placeHolderLabel }}"
+            noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+          >
+          </ngx-mat-select-search>
+        </mat-option>
+        @for (glAccount of glAccountData | async; track glAccount) {
+          <mat-option [value]="glAccount.id">
+            {{ '(' + glAccount.glCode + ') ' + glAccount.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
 </div>

src/app/shared/accounting/gl-account-selector/gl-account-selector.component.ts

@@ -1,10 +1,10 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { GLAccount } from 'app/shared/models/general.model';
 import { ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -19,6 +19,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GlAccountSelectorComponent implements OnInit, OnChanges, OnDestroy {
+  private translateService = inject(TranslateService);
+
   @Input() inputFormControl: UntypedFormControl;
   @Input() glAccountList: GLAccount[] = [];
   @Input() required = false;
@@ -36,8 +38,6 @@ export class GlAccountSelectorComponent implements OnInit, OnChanges, OnDestroy
   placeHolderLabel = '';
   noEntriesFoundLabel = '';
 
-  constructor(private translateService: TranslateService) {}
-
   ngOnInit(): void {
     // listen for search field value changes
     this.filterFormCtrl.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe(() => {

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -1,155 +1,158 @@
-<div *ngIf="isJournalEntryLoaded">
-  <div *ngIf="dataSource?.data[0].manualEntry" class="layout-row layout-align-end container m-b-20">
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="revertTransaction()"
-      *mifosxHasPermission="'REVERSE_JOURNALENTRY'"
-      [disabled]="dataSource?.data[0].reversed"
-    >
-      <span *ngIf="!dataSource.data[0].reversed">
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
-      </span>
-      <span *ngIf="dataSource.data[0].reversed">{{ 'labels.buttons.Transaction Reverted' | translate }}</span>
-    </button>
+@if (isJournalEntryLoaded) {
+  <div>
+    @if (dataSource?.data[0].manualEntry) {
+      <div class="layout-row layout-align-end container m-b-20">
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="revertTransaction()"
+          *mifosxHasPermission="'REVERSE_JOURNALENTRY'"
+          [disabled]="dataSource?.data[0].reversed"
+        >
+          @if (!dataSource.data[0].reversed) {
+            <span>
+              <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
+            </span>
+          }
+          @if (dataSource.data[0].reversed) {
+            <span>{{ 'labels.buttons.Transaction Reverted' | translate }}</span>
+          }
+        </button>
+      </div>
+    }
+    @if (isViewTransaction()) {
+      <div class="container m-b-20">
+        @if (dataSource) {
+          <mat-card class="mat-elevation-z8" ngClass="{{ journalEntryColor() }}">
+            <mat-card-content>
+              <div class="layout-row-wrap">
+                <div class="flex-25 header">
+                  {{ 'labels.inputs.Office' | translate }}
+                </div>
+                <div class="flex-25">
+                  {{ dataSource.data[0].officeName }}
+                </div>
+                <div class="flex-25 header">
+                  {{ 'labels.inputs.Transaction Date' | translate }}
+                </div>
+                <div class="flex-25">
+                  {{ dataSource.data[0].transactionDate | dateFormat }}
+                </div>
+                <div class="flex-25 header">
+                  {{ 'labels.inputs.Created By' | translate }}
+                </div>
+                <div class="flex-25">
+                  {{ dataSource.data[0].createdByUserName }}
+                </div>
+                <div class="flex-25 header">
+                  {{ 'labels.inputs.Submitted on' | translate }}
+                </div>
+                <div class="flex-25">
+                  {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
+                </div>
+                <div class="flex-25 header">
+                  {{ 'labels.inputs.Manual Journal Entry' | translate }}
+                </div>
+                <div class="flex-25">
+                  {{ dataSource.data[0].manualEntry | yesNo }}
+                </div>
+                @if (dataSource.data[0].externalAssetOwner) {
+                  <div class="flex-25 header">
+                    {{ 'labels.inputs.External Asset Owner' | translate }}
+                  </div>
+                }
+                @if (dataSource.data[0].externalAssetOwner) {
+                  <div class="flex-25">
+                    {{ dataSource.data[0].externalAssetOwner }}
+                  </div>
+                }
+              </div>
+            </mat-card-content>
+          </mat-card>
+        }
+      </div>
+    }
+    <div class="mat-elevation-z8 container layout-align-center layout-row-wrap">
+      <table mat-table [dataSource]="dataSource" matSort>
+        <ng-container matColumnDef="id">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Entry ID' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.id }}</td>
+        </ng-container>
+        <ng-container matColumnDef="glAccountType">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Type' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountType.value }}</td>
+        </ng-container>
+        <ng-container matColumnDef="glAccountCode">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Account Code' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountCode }}</td>
+        </ng-container>
+        <ng-container matColumnDef="glAccountName">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Account Name' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="debit">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Debit' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            @if (transaction.entryType.value === 'DEBIT') {
+              <span>
+                {{ transaction.currency.displaySymbol || transaction.currency.code }}
+                {{ transaction.amount | formatNumber }}
+              </span>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="credit">
+          <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Credit' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            @if (transaction.entryType.value === 'CREDIT') {
+              <span>
+                {{ transaction.currency.displaySymbol || transaction.currency.code }}
+                {{ transaction.amount | formatNumber }}
+              </span>
+            }
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          (click)="viewJournalEntry(row)"
+          class="select-row"
+        ></tr>
+      </table>
+      <div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
+        <button type="button" color="primary" mat-raised-button (click)="goBack()">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
+      </div>
+    </div>
   </div>
+}
 
-  <div class="container m-b-20" *ngIf="isViewTransaction()">
-    <mat-card class="mat-elevation-z8" ngClass="{{ journalEntryColor() }}" *ngIf="dataSource">
-      <mat-card-content>
-        <div class="layout-row-wrap">
-          <div class="flex-25 header">
-            {{ 'labels.inputs.Office' | translate }}
-          </div>
-
-          <div class="flex-25">
-            {{ dataSource.data[0].officeName }}
-          </div>
-
-          <div class="flex-25 header">
-            {{ 'labels.inputs.Transaction Date' | translate }}
-          </div>
-
-          <div class="flex-25">
-            {{ dataSource.data[0].transactionDate | dateFormat }}
-          </div>
-
-          <div class="flex-25 header">
-            {{ 'labels.inputs.Created By' | translate }}
-          </div>
-
-          <div class="flex-25">
-            {{ dataSource.data[0].createdByUserName }}
-          </div>
-
-          <div class="flex-25 header">
-            {{ 'labels.inputs.Submitted on' | translate }}
-          </div>
-
-          <div class="flex-25">
-            {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
-          </div>
-
-          <div class="flex-25 header">
-            {{ 'labels.inputs.Manual Journal Entry' | translate }}
-          </div>
-
-          <div class="flex-25">
-            {{ dataSource.data[0].manualEntry | yesNo }}
-          </div>
-
-          <div class="flex-25 header" *ngIf="dataSource.data[0].externalAssetOwner">
-            {{ 'labels.inputs.External Asset Owner' | translate }}
-          </div>
-
-          <div class="flex-25" *ngIf="dataSource.data[0].externalAssetOwner">
-            {{ dataSource.data[0].externalAssetOwner }}
-          </div>
-        </div>
-      </mat-card-content>
-    </mat-card>
-  </div>
-
-  <div class="mat-elevation-z8 container layout-align-center layout-row-wrap">
-    <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="id">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
-          {{ 'labels.inputs.Entry ID' | translate }}
-        </th>
-        <td mat-cell *matCellDef="let transaction">{{ transaction.id }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountType.value }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
-          {{ 'labels.inputs.Account Code' | translate }}
-        </th>
-        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountCode }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
-          {{ 'labels.inputs.Account Name' | translate }}
-        </th>
-        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="debit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
-          {{ 'labels.inputs.Debit' | translate }}
-        </th>
-        <td mat-cell *matCellDef="let transaction">
-          <span *ngIf="transaction.entryType.value === 'DEBIT'">
-            {{ transaction.currency.displaySymbol || transaction.currency.code }}
-            {{ transaction.amount | formatNumber }}
-          </span>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="credit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
-          {{ 'labels.inputs.Credit' | translate }}
-        </th>
-        <td mat-cell *matCellDef="let transaction">
-          <span *ngIf="transaction.entryType.value === 'CREDIT'">
-            {{ transaction.currency.displaySymbol || transaction.currency.code }}
-            {{ transaction.amount | formatNumber }}
-          </span>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        (click)="viewJournalEntry(row)"
-        class="select-row"
-      ></tr>
-    </table>
-
+@if (!isJournalEntryLoaded) {
+  <div class="container m-b-20">
+    <div class="alert">
+      <div class="message">
+        <i class="fa fa-exclamation-circle alert-check"></i>
+        {{ 'labels.text.No data found' | translate }}
+      </div>
+    </div>
     <div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
       <button type="button" color="primary" mat-raised-button (click)="goBack()">
         {{ 'labels.buttons.Back' | translate }}
       </button>
     </div>
   </div>
-</div>
-
-<div class="container m-b-20" *ngIf="!isJournalEntryLoaded">
-  <div class="alert">
-    <div class="message">
-      <i class="fa fa-exclamation-circle alert-check"></i>
-      {{ 'labels.text.No data found' | translate }}
-    </div>
-  </div>
-
-  <div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
-    <button type="button" color="primary" mat-raised-button (click)="goBack()">
-      {{ 'labels.buttons.Back' | translate }}
-    </button>
-  </div>
-</div>
+}

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { ViewJournalEntryComponent } from '../view-journal-entry/view-journal-entry.component';
 import { RevertTransactionComponent } from 'app/accounting/revert-transaction/revert-transaction.component';
 import { AccountingService } from 'app/accounting/accounting.service';
@@ -19,7 +19,7 @@ import {
   MatRowDef,
   MatRow
 } from '@angular/material/table';
-import { Location, NgIf } from '@angular/common';
+import { Location } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { DateFormatPipe } from '../../../pipes/date-format.pipe';
 import { DatetimeFormatPipe } from '../../../pipes/datetime-format.pipe';
@@ -53,6 +53,12 @@ import { YesnoPipe } from '@pipes/yesno.pipe';
   ]
 })
 export class ViewJournalEntryTransactionComponent implements OnInit {
+  private accountingService = inject(AccountingService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+  private location = inject(Location);
+
   title: string;
   journalEntriesData: any[];
   /** Transaction data.  */
@@ -80,20 +86,6 @@ export class ViewJournalEntryTransactionComponent implements OnInit {
 
   isManualJournalEntry = false;
 
-  /**
-   * @param {AccountingService} accountingService Accounting Service.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Router} router Router for navigation.
-   * @param {MatDialog} dialog Dialog reference.
-   */
-  constructor(
-    private accountingService: AccountingService,
-    private route: ActivatedRoute,
-    private router: Router,
-    public dialog: MatDialog,
-    private location: Location
-  ) {}
-
   /**
    * Retrieves the transaction data from `resolve` and sets the transaction table.
    */

src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html

@@ -39,8 +39,12 @@
 
     <tr>
       <th>
-        <span *ngIf="data.journalEntry.entryType.value === 'CREDIT'">{{ 'labels.inputs.Credit' | translate }}</span>
-        <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">{{ 'labels.inputs.Debit' | translate }}</span>
+        @if (data.journalEntry.entryType.value === 'CREDIT') {
+          <span>{{ 'labels.inputs.Credit' | translate }}</span>
+        }
+        @if (data.journalEntry.entryType.value === 'DEBIT') {
+          <span>{{ 'labels.inputs.Debit' | translate }}</span>
+        }
       </th>
       <td>{{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}</td>
     </tr>
@@ -50,54 +54,74 @@
       <td>({{ data.journalEntry.currency.code }}) {{ data.journalEntry.currency.name }}</td>
     </tr>
 
-    <tr *ngIf="data.journalEntry.referenceNumber">
-      <th>{{ 'labels.inputs.Reference Number' | translate }}</th>
-      <td>{{ data.journalEntry.referenceNumber }}</td>
-    </tr>
+    @if (data.journalEntry.referenceNumber) {
+      <tr>
+        <th>{{ 'labels.inputs.Reference Number' | translate }}</th>
+        <td>{{ data.journalEntry.referenceNumber }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="data.journalEntry.comments">
-      <th>{{ 'labels.inputs.Comments' | translate }}</th>
-      <td>{{ data.journalEntry.comments }}</td>
-    </tr>
+    @if (data.journalEntry.comments) {
+      <tr>
+        <th>{{ 'labels.inputs.Comments' | translate }}</th>
+        <td>{{ data.journalEntry.comments }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails">
-      <th colspan="2" class="header">{{ 'labels.inputs.Payment Details' | translate }}</th>
-    </tr>
+    @if (existsPaymentDetails) {
+      <tr>
+        <th colspan="2" class="header">{{ 'labels.inputs.Payment Details' | translate }}</th>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.paymentType">
-      <th>{{ 'labels.inputs.Payment Type' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.paymentType.name }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.paymentType) {
+      <tr>
+        <th>{{ 'labels.inputs.Payment Type' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.paymentType.name }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.accountNumber">
-      <th>{{ 'labels.inputs.Account Number' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.accountNumber }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.accountNumber) {
+      <tr>
+        <th>{{ 'labels.inputs.Account Number' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.accountNumber }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.checkNumber">
-      <th>{{ 'labels.inputs.Cheque Number' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.checkNumber }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.checkNumber) {
+      <tr>
+        <th>{{ 'labels.inputs.Cheque Number' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.checkNumber }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.routingCode">
-      <th>{{ 'labels.inputs.Routing Code' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.routingCode }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.routingCode) {
+      <tr>
+        <th>{{ 'labels.inputs.Routing Code' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.routingCode }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.receiptNumber">
-      <th>{{ 'labels.inputs.Receipt Number' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.receiptNumber }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.receiptNumber) {
+      <tr>
+        <th>{{ 'labels.inputs.Receipt Number' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.receiptNumber }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.bankNumber">
-      <th>{{ 'labels.inputs.Bank Number' | translate }}</th>
-      <td>{{ data.journalEntry.transactionDetails.paymentDetails.bankNumber }}</td>
-    </tr>
+    @if (existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.bankNumber) {
+      <tr>
+        <th>{{ 'labels.inputs.Bank Number' | translate }}</th>
+        <td>{{ data.journalEntry.transactionDetails.paymentDetails.bankNumber }}</td>
+      </tr>
+    }
 
-    <tr *ngIf="existsPaymentDetails">
-      <th>{{ 'labels.inputs.Created by' | translate }}</th>
-      <td>{{ data.journalEntry.createdByUserName }}</td>
-    </tr>
+    @if (existsPaymentDetails) {
+      <tr>
+        <th>{{ 'labels.inputs.Created by' | translate }}</th>
+        <td>{{ data.journalEntry.createdByUserName }}</td>
+      </tr>
+    }
 
     <tr>
       <th>{{ 'labels.inputs.Submitted on' | translate }}</th>

src/app/shared/accounting/view-journal-entry/view-journal-entry.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -34,15 +34,17 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewJournalEntryComponent {
+  dialogRef = inject<MatDialogRef<ViewJournalEntryComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
   existsPaymentDetails = false;
   /**
    * @param {MatDialogRef} dialogRef Component reference to dialog.
    * @param {any} data Provides journal entry.
    */
-  constructor(
-    public dialogRef: MatDialogRef<ViewJournalEntryComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  constructor() {
+    const data = this.data;
+
     this.existsPaymentDetails =
       data.journalEntry.transactionDetails != null && data.journalEntry.transactionDetails.paymentDetails != null;
   }

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html

@@ -1,150 +1,159 @@
 <div class="layout-row-wrap responsive-column">
-  <div *ngIf="accountingRule" class="layout-row responsive-column flex-100">
-    <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
-    <span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
-  </div>
+  @if (accountingRule) {
+    <div class="layout-row responsive-column flex-100">
+      <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
+      <span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
+    </div>
+  }
 
   <div class="layout-row-wrap responsive-column flex-100">
-    <div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-100">
-      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Saving reference'"
-          [glAccount]="accountingMappings.savingsReferenceAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Overdraft portfolio'"
-          *ngIf="accountingMappings.overdraftPortfolioControl"
-          [glAccount]="accountingMappings.overdraftPortfolioControl"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Fees Receivable'"
-          *ngIf="isAccrualAccounting()"
-          [glAccount]="accountingMappings.feeReceivableAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Penalties Receivable'"
-          *ngIf="isAccrualAccounting()"
-          [glAccount]="accountingMappings.penaltyReceivableAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Interest Receivable'"
-          *ngIf="isAccrualAccounting()"
-          [glAccount]="accountingMappings.interestReceivableAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-
-        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
+    @if (isCashOrAccrualAccounting()) {
+      <div class="layout-row-wrap responsive-column flex-100">
+        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
         <div class="flex-100 layout-row-wrap responsive-column">
           <mifosx-gl-account-display
             class="flex-100"
-            [accountTitle]="'Saving control'"
-            [glAccount]="accountingMappings.savingsControlAccount"
+            [accountTitle]="'Saving reference'"
+            [glAccount]="accountingMappings.savingsReferenceAccount"
             [withTitle]="'40%'"
           >
           </mifosx-gl-account-display>
         </div>
         <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Savings transfers in suspense'"
-            [glAccount]="accountingMappings.transfersInSuspenseAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
+          @if (accountingMappings.overdraftPortfolioControl) {
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Overdraft portfolio'"
+              [glAccount]="accountingMappings.overdraftPortfolioControl"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          }
         </div>
         <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Interest Payable'"
-            *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.interestPayableAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
+          @if (isAccrualAccounting()) {
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Fees Receivable'"
+              [glAccount]="accountingMappings.feeReceivableAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          }
         </div>
         <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Escheat liability'"
-            *ngIf="accountingMappings.escheatLiabilityAccount"
-            [glAccount]="accountingMappings.escheatLiabilityAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-
-        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
-        <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Income from fees'"
-            [glAccount]="accountingMappings.incomeFromFeeAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Income from penalties'"
-            [glAccount]="accountingMappings.incomeFromPenaltyAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Income from Interest'"
-            *ngIf="accountingMappings.incomeFromInterest"
-            [glAccount]="accountingMappings.incomeFromInterest"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-
-        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
-        <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Interest on savings'"
-            [glAccount]="accountingMappings.interestOnSavingsAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <div class="flex-100 layout-row-wrap responsive-column">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Write-off'"
-            *ngIf="accountingMappings.writeOffAccount"
-            [glAccount]="accountingMappings.writeOffAccount"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
+          @if (isAccrualAccounting()) {
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Penalties Receivable'"
+              [glAccount]="accountingMappings.penaltyReceivableAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          }
+          @if (isAccrualAccounting()) {
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Interest Receivable'"
+              [glAccount]="accountingMappings.interestReceivableAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          }
+          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Saving control'"
+              [glAccount]="accountingMappings.savingsControlAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Savings transfers in suspense'"
+              [glAccount]="accountingMappings.transfersInSuspenseAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            @if (isAccrualAccounting()) {
+              <mifosx-gl-account-display
+                class="flex-100"
+                [accountTitle]="'Interest Payable'"
+                [glAccount]="accountingMappings.interestPayableAccount"
+                [withTitle]="'40%'"
+              >
+              </mifosx-gl-account-display>
+            }
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            @if (accountingMappings.escheatLiabilityAccount) {
+              <mifosx-gl-account-display
+                class="flex-100"
+                [accountTitle]="'Escheat liability'"
+                [glAccount]="accountingMappings.escheatLiabilityAccount"
+                [withTitle]="'40%'"
+              >
+              </mifosx-gl-account-display>
+            }
+          </div>
+          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Income from fees'"
+              [glAccount]="accountingMappings.incomeFromFeeAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Income from penalties'"
+              [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            @if (accountingMappings.incomeFromInterest) {
+              <mifosx-gl-account-display
+                class="flex-100"
+                [accountTitle]="'Income from Interest'"
+                [glAccount]="accountingMappings.incomeFromInterest"
+                [withTitle]="'40%'"
+              >
+              </mifosx-gl-account-display>
+            }
+          </div>
+          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            <mifosx-gl-account-display
+              class="flex-100"
+              [accountTitle]="'Interest on savings'"
+              [glAccount]="accountingMappings.interestOnSavingsAccount"
+              [withTitle]="'40%'"
+            >
+            </mifosx-gl-account-display>
+          </div>
+          <div class="flex-100 layout-row-wrap responsive-column">
+            @if (accountingMappings.writeOffAccount) {
+              <mifosx-gl-account-display
+                class="flex-100"
+                [accountTitle]="'Write-off'"
+                [glAccount]="accountingMappings.writeOffAccount"
+                [withTitle]="'40%'"
+              >
+              </mifosx-gl-account-display>
+            }
+          </div>
         </div>
       </div>
-    </div>
+    }
   </div>
 </div>

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { Accounting } from 'app/core/utils/accounting';
 import { OptionData } from 'app/shared/models/option-data.model';
 import { GlAccountDisplayComponent } from '../gl-account-display/gl-account-display.component';
@@ -14,11 +14,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewSavingsAccountingDetailsComponent {
+  private accounting = inject(Accounting);
+
   @Input() accountingRule: OptionData;
   @Input() accountingMappings: any[] = [];
 
-  constructor(private accounting: Accounting) {}
-
   isCashOrAccrualAccounting(): boolean {
     if (this.accountingRule) {
       return this.accounting.isCashOrAccrualAccounting(this.accountingRule);