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/navigation/center-navigation/center-navigation.component.html

@@ -20,10 +20,12 @@
           {{ 'labels.inputs.Account No' | translate }}:
           <mifosx-account-number accountNo="{{ centerData.accountNo }}"></mifosx-account-number>
         </p>
-        <p *ngIf="centerData.externalId">
-          {{ 'labels.inputs.External Id' | translate }}:
-          <mifosx-external-identifier externalId="{{ centerData.externalId }}"></mifosx-external-identifier>
-        </p>
+        @if (centerData.externalId) {
+          <p>
+            {{ 'labels.inputs.External Id' | translate }}:
+            <mifosx-external-identifier externalId="{{ centerData.externalId }}"></mifosx-external-identifier>
+          </p>
+        }
       </mat-card-subtitle>
     </div>
   </mat-card-title-group>
@@ -49,73 +51,89 @@
           {{ centerData.staffName }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="centerSummaryData">
-          {{ 'labels.inputs.Number of Active Clients' | translate }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Number of Active Clients' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="centerSummaryData">
-          {{ centerSummaryData.activeClients }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50">
+            {{ centerSummaryData.activeClients }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="centerSummaryData">
-          {{ 'labels.inputs.Number of Active Client Loans' | translate }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Number of Active Client Loans' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="centerSummaryData">
-          {{ centerSummaryData.activeClientLoans }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50">
+            {{ centerSummaryData.activeClientLoans }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="centerSummaryData">
-          {{ 'labels.inputs.Number of Active Client Borrowers' | translate }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Number of Active Client Borrowers' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="centerSummaryData">
-          {{ centerSummaryData.activeClientBorrowers }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50">
+            {{ centerSummaryData.activeClientBorrowers }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="centerSummaryData">
-          {{ 'labels.inputs.Number of Active Overdue Group Loans' | translate }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Number of Active Overdue Group Loans' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="centerSummaryData">
-          {{ centerSummaryData.overdueGroupLoans }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50">
+            {{ centerSummaryData.overdueGroupLoans }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="centerSummaryData">
-          {{ 'labels.inputs.Number of Active Overdue Client Loans' | translate }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Number of Active Overdue Client Loans' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="centerSummaryData">
-          {{ centerSummaryData.overdueClientLoans }}
-        </div>
+        @if (centerSummaryData) {
+          <div class="flex-50">
+            {{ centerSummaryData.overdueClientLoans }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ 'labels.inputs.Next Meeting Date' | translate }}
-        </div>
+        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Next Meeting Date' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
-        </div>
+        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="flex-50">
+            {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ 'labels.inputs.Meeting Frequency' | translate }}
-        </div>
+        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Meeting Frequency' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ centerSummaryData.collectionMeetingCalendar.humanReadable }}
-        </div>
+        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable) {
+          <div class="flex-50">
+            {{ centerSummaryData.collectionMeetingCalendar.humanReadable }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Number of Groups' | translate }}
@@ -127,14 +145,18 @@
       </div>
     </mat-tab>
 
-    <mat-tab label="Loan Accounts" *ngIf="centerAccountsData && centerAccountsData.loanAccounts">
-      <mifosx-loan-account-table [loanAccountData]="centerAccountsData.loanAccounts"></mifosx-loan-account-table>
-    </mat-tab>
+    @if (centerAccountsData && centerAccountsData.loanAccounts) {
+      <mat-tab label="Loan Accounts">
+        <mifosx-loan-account-table [loanAccountData]="centerAccountsData.loanAccounts"></mifosx-loan-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Savings Accounts" *ngIf="centerAccountsData && centerAccountsData.savingsAccounts">
-      <mifosx-savings-account-table
-        [savingsAccountData]="centerAccountsData.savingsAccounts"
-      ></mifosx-savings-account-table>
-    </mat-tab>
+    @if (centerAccountsData && centerAccountsData.savingsAccounts) {
+      <mat-tab label="Savings Accounts">
+        <mifosx-savings-account-table
+          [savingsAccountData]="centerAccountsData.savingsAccounts"
+        ></mifosx-savings-account-table>
+      </mat-tab>
+    }
   </mat-tab-group>
 </mat-card-content>

src/app/navigation/client-navigation/client-navigation.component.html

@@ -29,45 +29,65 @@
   <mat-tab-group>
     <mat-tab label="Details">
       <div class="layout-row-wrap">
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.firstName">
-          {{ 'labels.inputs.First Name' | translate }}
-        </div>
+        @if (clientData.firstName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.First Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.firstName">
-          {{ clientData.firstName }}
-        </div>
+        @if (clientData.firstName) {
+          <div class="flex-50">
+            {{ clientData.firstName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.middleName">
-          {{ 'labels.inputs.Middle Name' | translate }}
-        </div>
+        @if (clientData.middleName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Middle Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.middleName">
-          {{ clientData.middleName }}
-        </div>
+        @if (clientData.middleName) {
+          <div class="flex-50">
+            {{ clientData.middleName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.lastName">
-          {{ 'labels.inputs.Last Name' | translate }}
-        </div>
+        @if (clientData.lastName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Last Name' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.lastName">
-          {{ clientData.lastName }}
-        </div>
+        @if (clientData.lastName) {
+          <div class="flex-50">
+            {{ clientData.lastName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.dateOfBirth">
-          {{ 'labels.inputs.Date of Birth' | translate }}
-        </div>
+        @if (clientData.dateOfBirth) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Date of Birth' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.dateOfBirth">
-          {{ clientData.dateOfBirth | dateFormat }}
-        </div>
+        @if (clientData.dateOfBirth) {
+          <div class="flex-50">
+            {{ clientData.dateOfBirth | dateFormat }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.mobileNo">
-          {{ 'labels.inputs.Mobile Number' | translate }}
-        </div>
+        @if (clientData.mobileNo) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Mobile Number' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.mobileNo">
-          {{ clientData.mobileNo }}
-        </div>
+        @if (clientData.mobileNo) {
+          <div class="flex-50">
+            {{ clientData.mobileNo }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Activation Date' | translate }}
@@ -77,40 +97,56 @@
           {{ clientData.activationDate | dateFormat }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.officeName">
-          {{ 'labels.inputs.Associated Office' | translate }}
-        </div>
+        @if (clientData.officeName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Office' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.officeName">
-          {{ clientData.officeName }}
-        </div>
+        @if (clientData.officeName) {
+          <div class="flex-50">
+            {{ clientData.officeName }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="clientData.staffName">
-          {{ 'labels.inputs.Associated Staff' | translate }}
-        </div>
+        @if (clientData.staffName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Staff' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="clientData.staffName">
-          {{ clientData.staffName }}
-        </div>
+        @if (clientData.staffName) {
+          <div class="flex-50">
+            {{ clientData.staffName }}
+          </div>
+        }
       </div>
     </mat-tab>
 
-    <mat-tab label="Loan Accounts" *ngIf="clientAccountsData && clientAccountsData.loanAccounts">
-      <mifosx-loan-account-table [loanAccountData]="clientAccountsData.loanAccounts"></mifosx-loan-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.loanAccounts) {
+      <mat-tab label="Loan Accounts">
+        <mifosx-loan-account-table [loanAccountData]="clientAccountsData.loanAccounts"></mifosx-loan-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Savings Accounts" *ngIf="clientAccountsData && clientAccountsData.savingsAccounts">
-      <mifosx-savings-account-table
-        [savingsAccountData]="clientAccountsData.savingsAccounts"
-      ></mifosx-savings-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.savingsAccounts) {
+      <mat-tab label="Savings Accounts">
+        <mifosx-savings-account-table
+          [savingsAccountData]="clientAccountsData.savingsAccounts"
+        ></mifosx-savings-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Share Accounts" *ngIf="clientAccountsData && clientAccountsData.shareAccounts">
-      <mifosx-share-account-table [shareAccountData]="clientAccountsData.shareAccounts"></mifosx-share-account-table>
-    </mat-tab>
+    @if (clientAccountsData && clientAccountsData.shareAccounts) {
+      <mat-tab label="Share Accounts">
+        <mifosx-share-account-table [shareAccountData]="clientAccountsData.shareAccounts"></mifosx-share-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Group Members" *ngIf="clientData.groups && clientData.groups.length !== 0">
-      <mifosx-member-groups [memberGroupData]="clientData.groups"></mifosx-member-groups>
-    </mat-tab>
+    @if (clientData.groups && clientData.groups.length !== 0) {
+      <mat-tab label="Group Members">
+        <mifosx-member-groups [memberGroupData]="clientData.groups"></mifosx-member-groups>
+      </mat-tab>
+    }
   </mat-tab-group>
 </mat-card-content>

src/app/navigation/group-navigation/group-navigation.component.html

@@ -45,41 +45,41 @@
           {{ groupData.staffName }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="groupData.centerName">
-          {{ 'labels.inputs.Associated Center' | translate }}
-        </div>
+        @if (groupData.centerName) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Associated Center' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="groupData.centerName">
-          {{ groupData.centerName }}
-        </div>
+        @if (groupData.centerName) {
+          <div class="flex-50">
+            {{ groupData.centerName }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ 'labels.inputs.Next Meeting Date' | translate }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Next Meeting Date' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
-        >
-          {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
+          <div class="flex-50">
+            {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
+          </div>
+        }
 
-        <div
-          class="mat-body-strong flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ 'labels.inputs.Meeting Frequency' | translate }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable) {
+          <div class="mat-body-strong flex-50">
+            {{ 'labels.inputs.Meeting Frequency' | translate }}
+          </div>
+        }
 
-        <div
-          class="flex-50"
-          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
-        >
-          {{ groupData.collectionMeetingCalendar.humanReadable }}
-        </div>
+        @if (groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable) {
+          <div class="flex-50">
+            {{ groupData.collectionMeetingCalendar.humanReadable }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Number of Clients' | translate }}
@@ -91,14 +91,18 @@
       </div>
     </mat-tab>
 
-    <mat-tab label="Loan Accounts" *ngIf="groupAccountsData && groupAccountsData.loanAccounts">
-      <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
-    </mat-tab>
+    @if (groupAccountsData && groupAccountsData.loanAccounts) {
+      <mat-tab label="Loan Accounts">
+        <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
+      </mat-tab>
+    }
 
-    <mat-tab label="Savings Accounts" *ngIf="groupAccountsData && groupAccountsData.savingsAccounts">
-      <mifosx-savings-account-table
-        [savingsAccountData]="groupAccountsData.savingsAccounts"
-      ></mifosx-savings-account-table>
-    </mat-tab>
+    @if (groupAccountsData && groupAccountsData.savingsAccounts) {
+      <mat-tab label="Savings Accounts">
+        <mifosx-savings-account-table
+          [savingsAccountData]="groupAccountsData.savingsAccounts"
+        ></mifosx-savings-account-table>
+      </mat-tab>
+    }
   </mat-tab-group>
 </mat-card-content>

src/app/navigation/loan-account-table/loan-account-table.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -48,6 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class LoanAccountTableComponent {
+  private accountsFilterPipe = inject(AccountsFilterPipe);
+
   /** Columns to be displayed in the loan accounts table. */
   displayedColumns: string[] = [
     'accountNo',
@@ -81,11 +83,6 @@ export class LoanAccountTableComponent {
     this.dataSource.sort = this.sort;
   }
 
-  /**
-   * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe.
-   */
-  constructor(private accountsFilterPipe: AccountsFilterPipe) {}
-
   /**
    * Filters data in users table based on passed value.
    * @param {string} filterValue Value to filter data.

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

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

src/app/navigation/navigation.component.html

@@ -3,91 +3,109 @@
     <div class="flex-48">
       <mat-card class="layout-column">
         <mat-card-content class="layout-column">
-          <mat-form-field *ngIf="!(officeData === undefined || officeData === null)">
-            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <mat-select [formControl]="officeSelector">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!(officeData === undefined || officeData === null)) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+              <mat-select [formControl]="officeSelector">
+                @for (office of officeData; track office) {
+                  <mat-option [value]="office.id">
+                    {{ office.name }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!(employeeData === undefined || employeeData === null)">
-            <mat-label>{{ employeeData.length ? 'Officer' : 'No Associated Officers' }}</mat-label>
-            <mat-select [formControl]="employeeSelector">
-              <mat-option *ngFor="let employee of employeeData" [value]="employee.id">
-                {{ employee.displayName }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!(employeeData === undefined || employeeData === null)) {
+            <mat-form-field>
+              <mat-label>{{ employeeData.length ? 'Officer' : 'No Associated Officers' }}</mat-label>
+              <mat-select [formControl]="employeeSelector">
+                @for (employee of employeeData; track employee) {
+                  <mat-option [value]="employee.id">
+                    {{ employee.displayName }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!(centerData === undefined || centerData === null)">
-            <mat-label>{{ centerData.length ? 'Center' : 'No Associated Centers' }}</mat-label>
-            <mat-select [formControl]="centerSelector">
-              <mat-option *ngFor="let center of centerData" [value]="center.id">
-                {{ center.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!(centerData === undefined || centerData === null)) {
+            <mat-form-field>
+              <mat-label>{{ centerData.length ? 'Center' : 'No Associated Centers' }}</mat-label>
+              <mat-select [formControl]="centerSelector">
+                @for (center of centerData; track center) {
+                  <mat-option [value]="center.id">
+                    {{ center.name }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!(groupData === undefined || groupData === null)">
-            <mat-label>{{ groupData.length ? 'Group' : 'No Associated Groups' }}</mat-label>
-            <mat-select [formControl]="groupSelector">
-              <mat-option *ngFor="let group of groupData" [value]="group.id">
-                {{ group.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!(groupData === undefined || groupData === null)) {
+            <mat-form-field>
+              <mat-label>{{ groupData.length ? 'Group' : 'No Associated Groups' }}</mat-label>
+              <mat-select [formControl]="groupSelector">
+                @for (group of groupData; track group) {
+                  <mat-option [value]="group.id">
+                    {{ group.name }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="!(clientData === undefined || clientData === null)">
-            <mat-label>{{ clientData.length ? 'Client' : 'No Associated Clients' }}</mat-label>
-            <mat-select [formControl]="clientSelector">
-              <mat-option *ngFor="let client of clientData" [value]="client.id">
-                {{ client.displayName }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!(clientData === undefined || clientData === null)) {
+            <mat-form-field>
+              <mat-label>{{ clientData.length ? 'Client' : 'No Associated Clients' }}</mat-label>
+              <mat-select [formControl]="clientSelector">
+                @for (client of clientData; track client) {
+                  <mat-option [value]="client.id">
+                    {{ client.displayName }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
         </mat-card-content>
       </mat-card>
     </div>
 
     <div class="flex-48">
-      <mat-card class="layout-column" *ngIf="selectedItem">
-        <ng-container *ngIf="selectedItem.itemType === 'office'">
-          <mifosx-office-navigation
-            [officeData]="selectedItem"
-            [employeeData]="employeeData"
-          ></mifosx-office-navigation>
-        </ng-container>
-
-        <ng-container *ngIf="selectedItem.itemType === 'employee'">
-          <mifosx-staff-navigation [employeeData]="selectedItem" [centerData]="centerData"></mifosx-staff-navigation>
-        </ng-container>
-
-        <ng-container *ngIf="selectedItem.itemType === 'center'">
-          <mifosx-center-navigation
-            [centerData]="selectedItem"
-            [groupData]="groupData"
-            [centerAccountsData]="selectedItemAccounts"
-            [centerSummaryData]="selectedItemSummary"
-          ></mifosx-center-navigation>
-        </ng-container>
-
-        <ng-container *ngIf="selectedItem.itemType === 'group'">
-          <mifosx-group-navigation
-            [groupData]="selectedItem"
-            [clientData]="clientData"
-            [groupAccountsData]="selectedItemAccounts"
-          ></mifosx-group-navigation>
-        </ng-container>
-
-        <ng-container *ngIf="selectedItem.itemType === 'client'">
-          <mifosx-client-navigation
-            [clientData]="selectedItem"
-            [clientAccountsData]="selectedItemAccounts"
-          ></mifosx-client-navigation>
-        </ng-container>
-      </mat-card>
+      @if (selectedItem) {
+        <mat-card class="layout-column">
+          @if (selectedItem.itemType === 'office') {
+            <mifosx-office-navigation
+              [officeData]="selectedItem"
+              [employeeData]="employeeData"
+            ></mifosx-office-navigation>
+          }
+          @if (selectedItem.itemType === 'employee') {
+            <mifosx-staff-navigation [employeeData]="selectedItem" [centerData]="centerData"></mifosx-staff-navigation>
+          }
+          @if (selectedItem.itemType === 'center') {
+            <mifosx-center-navigation
+              [centerData]="selectedItem"
+              [groupData]="groupData"
+              [centerAccountsData]="selectedItemAccounts"
+              [centerSummaryData]="selectedItemSummary"
+            ></mifosx-center-navigation>
+          }
+          @if (selectedItem.itemType === 'group') {
+            <mifosx-group-navigation
+              [groupData]="selectedItem"
+              [clientData]="clientData"
+              [groupAccountsData]="selectedItemAccounts"
+            ></mifosx-group-navigation>
+          }
+          @if (selectedItem.itemType === 'client') {
+            <mifosx-client-navigation
+              [clientData]="selectedItem"
+              [clientAccountsData]="selectedItemAccounts"
+            ></mifosx-client-navigation>
+          }
+        </mat-card>
+      }
     </div>
   </div>
 </div>

src/app/navigation/navigation.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 
@@ -31,6 +31,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class NavigationComponent implements OnInit {
+  private navigationService = inject(NavigationService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Navigation Components */
   @ViewChild(OfficeNavigationComponent) officeNavigationComponent: OfficeNavigationComponent;
   @ViewChild(StaffNavigationComponent) staffNavigationComponent: StaffNavigationComponent;
@@ -74,11 +78,7 @@ export class NavigationComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(
-    private navigationService: NavigationService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });

src/app/navigation/navigation.service.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
@@ -12,10 +12,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class NavigationService {
-  /**
-   * @param {HttpClient} http Http Client to send requests.
-   */
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   /**
    * @returns {Observable<any>} Offices.

src/app/navigation/office-navigation/office-navigation.component.html

@@ -9,12 +9,16 @@
 
 <mat-card-content>
   <div class="layout-row-wrap">
-    <div class="flex-50 mat-body-strong" *ngIf="officeData.externalId">
-      {{ 'labels.inputs.External Id' | translate }}
-    </div>
-    <div class="flex-50" *ngIf="officeData.externalId">
-      <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
-    </div>
+    @if (officeData.externalId) {
+      <div class="flex-50 mat-body-strong">
+        {{ 'labels.inputs.External Id' | translate }}
+      </div>
+    }
+    @if (officeData.externalId) {
+      <div class="flex-50">
+        <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
+      </div>
+    }
 
     <div class="flex-50 mat-body-strong">
       {{ 'labels.inputs.Opened On' | translate }}

src/app/navigation/offices.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { NavigationService } from './navigation.service';
  */
 @Injectable()
 export class OfficesResolver {
-  /**
-   * @param {NavigationService} navigationService Navigation service.
-   */
-  constructor(private navigationService: NavigationService) {}
+  private navigationService = inject(NavigationService);
 
   /**
    * Returns the Offices data.

src/app/navigation/savings-account-table/savings-account-table.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -48,6 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountTableComponent {
+  private accountsFilterPipe = inject(AccountsFilterPipe);
+
   /** Columns to be displayed in the savings accounts table. */
   displayedColumns: string[] = [
     'accountNo',
@@ -81,11 +83,6 @@ export class SavingsAccountTableComponent {
     this.dataSource.sort = this.sort;
   }
 
-  /**
-   * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe.
-   */
-  constructor(private accountsFilterPipe: AccountsFilterPipe) {}
-
   /**
    * Filters data in users table based on passed value.
    * @param {string} filterValue Value to filter data.

src/app/navigation/share-account-table/share-account-table.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -48,6 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ShareAccountTableComponent {
+  private accountsFilterPipe = inject(AccountsFilterPipe);
+
   /** Columns to be displayed in the share accounts table. */
   displayedColumns: string[] = [
     'accountNo',
@@ -81,11 +83,6 @@ export class ShareAccountTableComponent {
     this.dataSource.sort = this.sort;
   }
 
-  /**
-   * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe.
-   */
-  constructor(private accountsFilterPipe: AccountsFilterPipe) {}
-
   /**
    * Filters data in users table based on passed value.
    * @param {string} filterValue Value to filter data.

src/app/navigation/staff-navigation/staff-navigation.component.html

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