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/groups/groups-view/add-role/add-role.component.html

@@ -6,27 +6,35 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
             <mat-select formControlName="clientId">
-              <mat-option *ngFor="let client of clientMemberData" [value]="client.id">
-                {{ client.displayName }}
-              </mat-option>
+              @for (client of clientMemberData; track client) {
+                <mat-option [value]="client.id">
+                  {{ client.displayName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupsAddRoleForm.controls.clientId.hasError('required')">
-              {{ 'labels.inputs.Client Member' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupsAddRoleForm.controls.clientId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Client Member' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Role' | translate }}</mat-label>
             <mat-select formControlName="role">
-              <mat-option *ngFor="let role of roleData" [value]="role.id">
-                {{ role.name }}
-              </mat-option>
+              @for (role of roleData; track role) {
+                <mat-option [value]="role.id">
+                  {{ role.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupsAddRoleForm.controls.role.hasError('required')">
-              {{ 'labels.inputs.Role' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupsAddRoleForm.controls.role.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Role' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/add-role/add-role.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AddRoleComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Groups Add Role Form */
   groupsAddRoleForm: UntypedFormGroup;
   /** Client Member Data */
@@ -34,12 +39,7 @@ export class AddRoleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupAndTemplateData: any }) => {
       this.groupAndTemplateData = data.groupAndTemplateData;
     });

src/app/groups/groups-view/committee-tab/committee-tab.component.html

@@ -3,55 +3,57 @@
     <div class="m-b-10">
       <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
     </div>
-    <div class="action-button m-b-10 gap-25px" *ngIf="groupStatus !== 'Closed'">
-      <button
-        mat-raised-button
-        class="f-right"
-        color="primary"
-        *mifosxHasPermission="'ASSIGNROLE_GROUP'"
-        [routerLink]="['add-role']"
-      >
-        <i class="fa fa-plus"></i>&nbsp; {{ 'labels.buttons.Add' | translate }}
-      </button>
+    @if (groupStatus !== 'Closed') {
+      <div class="action-button m-b-10 gap-25px">
+        <button
+          mat-raised-button
+          class="f-right"
+          color="primary"
+          *mifosxHasPermission="'ASSIGNROLE_GROUP'"
+          [routerLink]="['add-role']"
+        >
+          <i class="fa fa-plus"></i>&nbsp; {{ 'labels.buttons.Add' | translate }}
+        </button>
+      </div>
+    }
+  </div>
+
+  @if (groupRolesData) {
+    <div>
+      <table #rolesTable mat-table [dataSource]="groupRolesData" class="mat-elevation-z1 m-b-25">
+        <ng-container matColumnDef="Name">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.clientName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Role">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Role' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.role.name }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Client Id">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Id' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Actions">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            @if (groupStatus !== 'Closed') {
+              <span>
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="warn"
+                  *mifosxHasPermission="'UNASSIGNROLE_GROUP'"
+                  (click)="unassignRole(element.clientId, element.id)"
+                >
+                  <i class="fa fa-ban" matTooltip="{{ 'tooltips.Unassign' | translate }}"></i>
+                </button>
+              </span>
+            }
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="groupRolesColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: groupRolesColumns"></tr>
+      </table>
     </div>
-  </div>
-
-  <div *ngIf="groupRolesData">
-    <table #rolesTable mat-table [dataSource]="groupRolesData" class="mat-elevation-z1 m-b-25">
-      <ng-container matColumnDef="Name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.clientName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Role">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Role' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.role.name }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Client Id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Id' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <span *ngIf="groupStatus !== 'Closed'">
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="warn"
-              *mifosxHasPermission="'UNASSIGNROLE_GROUP'"
-              (click)="unassignRole(element.clientId, element.id)"
-            >
-              <i class="fa fa-ban" matTooltip="{{ 'tooltips.Unassign' | translate }}"></i>
-            </button>
-          </span>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="groupRolesColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: groupRolesColumns"></tr>
-    </table>
-  </div>
+  }
 </div>

src/app/groups/groups-view/committee-tab/committee-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -46,6 +46,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CommitteeTabComponent {
+  private route = inject(ActivatedRoute);
+  private groupsService = inject(GroupsService);
+  dialog = inject(MatDialog);
+
   /** Group Status */
   groupStatus: any;
   /** Group Roles Data */
@@ -69,11 +73,7 @@ export class CommitteeTabComponent {
    * @param {GroupsService} groupsService Groups Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private groupsService: GroupsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.parent.data.subscribe((data: { groupViewData: any }) => {
       this.groupViewData = data.groupViewData;
       this.groupRolesData = this.groupViewData.groupRoles;

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.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,
@@ -28,12 +28,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UnassignRoleDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<UnassignRoleDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  dialogRef = inject<MatDialogRef<UnassignRoleDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 }

src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.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,
@@ -28,8 +28,5 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UnassignStaffDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<UnassignStaffDialogComponent>) {}
+  dialogRef = inject<MatDialogRef<UnassignStaffDialogComponent>>(MatDialogRef);
 }

src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EntityDatatableTabComponent } from '../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -17,6 +17,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableTabsComponent {
+  private route = inject(ActivatedRoute);
+
   entityId: string;
   /** Group Datatable */
   entityDatatable: any;
@@ -27,7 +29,7 @@ export class DatatableTabsComponent {
    * Fetches data table data from `resolve`
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.entityId = this.route.parent.parent.snapshot.paramMap.get('groupId');
 
     this.route.data.subscribe((data: { groupDatatable: any }) => {

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -16,449 +16,422 @@
   </div>
 
   <!-- Client Members Table -->
-  <div *ngIf="groupClientMembers">
-    <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
+  @if (groupClientMembers) {
+    <div>
+      <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
+      <table mat-table [dataSource]="groupClientMembers" class="mat-elevation-z1 m-b-30">
+        <ng-container matColumnDef="Name">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            <i
+              class="fa fa-stop"
+              [ngClass]="element.status.code | statusLookup"
+              [matTooltip]="element.status.value"
+            ></i>
+            {{ element.displayName }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="Account No">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+          <td mat-cell *matCellDef="let element">{{ element.accountNo }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Office">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="JLG Loan Application">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.JLG Loan Application' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element.status.code !== 'clientStatusType.closed') {
+              <div class="m-l-30">
+                <button class="account-action-button" mat-raised-button color="primary" disabled>
+                  <i class="fa fa-plus" matTooltip="{{ 'tooltips.New Loan Application' | translate }}"></i>
+                </button>
+              </div>
+            }
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: clientMemberColumns"
+          [routerLink]="['/clients', row.id, 'general']"
+          class="select-row"
+        ></tr>
+      </table>
+    </div>
+  }
 
-    <table mat-table [dataSource]="groupClientMembers" class="mat-elevation-z1 m-b-30">
-      <ng-container matColumnDef="Name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
-          {{ element.displayName }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
-        <td mat-cell *matCellDef="let element">{{ element.accountNo }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Office">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="JLG Loan Application">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.JLG Loan Application' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <div class="m-l-30" *ngIf="element.status.code !== 'clientStatusType.closed'">
-            <button class="account-action-button" mat-raised-button color="primary" disabled>
-              <i class="fa fa-plus" matTooltip="{{ 'tooltips.New Loan Application' | translate }}"></i>
+  @if (loanAccounts) {
+    <div>
+      <div class="layout-row align-start table-header">
+        <div class="m-b-10">
+          <h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
+        </div>
+        @if ((loanAccounts | accountsFilter: 'loan' : 'closed').length) {
+          <div class="action-button m-b-10">
+            <button mat-raised-button class="f-right" color="primary" (click)="toggleLoanAccountsOverview()">
+              {{ showClosedLoanAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
             </button>
           </div>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: clientMemberColumns"
-        [routerLink]="['/clients', row.id, 'general']"
-        class="select-row"
-      ></tr>
-    </table>
-  </div>
-
-  <div *ngIf="loanAccounts">
-    <div class="layout-row align-start table-header">
-      <div class="m-b-10">
-        <h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
+        }
       </div>
-      <div *ngIf="(loanAccounts | accountsFilter: 'loan' : 'closed').length" class="action-button m-b-10">
-        <button mat-raised-button class="f-right" color="primary" (click)="toggleLoanAccountsOverview()">
-          {{ showClosedLoanAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Open Loan Accounts Table -->
-    <table
-      *ngIf="!showClosedLoanAccounts"
-      mat-table
-      [dataSource]="loanAccounts | accountsFilter: 'loan'"
-      class="mat-elevation-z1 m-b-30"
-    >
-      <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
-        <td mat-cell *matCellDef="let element">
-          <i
-            class="fa fa-stop"
-            [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
-            [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
-          ></i>
-          {{ element.accountNo }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.originalLoan }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.amountPaid }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <i
-            class="fa fa-large"
-            [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
-            [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
-          ></i>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
-            <i class="fa fa-dollar" matTooltip="{{ 'tooltips.Make Repayment' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="element.status.pendingApproval"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-          >
-            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-          >
-            <i class="fa fa-flag" matTooltip="{{ 'tooltips.Disburse' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-          >
-            <i class="fa fa-exchange" matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"></i>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: openLoansColumns"
-        [routerLink]="['../', 'loans-accounts', row.id, 'general']"
-      ></tr>
-    </table>
-
-    <!-- Closed Loan Accounts Table-->
-    <table
-      *ngIf="showClosedLoanAccounts"
-      mat-table
-      [dataSource]="loanAccounts | accountsFilter: 'loan' : 'closed'"
-      class="mat-elevation-z1 m-b-30"
-    >
-      <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
-        <td mat-cell *matCellDef="let element">
-          <i
-            class="fa fa-stop"
-            [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
-            [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
-          ></i>
-          {{ element.accountNo }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <i
-            class="fa fa-large"
-            [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
-            [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
-          ></i>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: closedLoansColumns"
-        [routerLink]="['../', 'loans-accounts', row.id, 'general']"
-      ></tr>
-    </table>
-  </div>
-
-  <div *ngIf="gsimAccounts">
-    <div class="layout-row align-start table-header">
-      <div class="m-b-10">
-        <h3>{{ 'labels.heading.GSIM Account Overview' | translate }}</h3>
-      </div>
-    </div>
-
-    <!-- GSIM Accounts Table -->
-    <table mat-table [dataSource]="gsimAccounts" class="mat-elevation-z1 m-b-30">
-      <ng-container matColumnDef="GSIM Id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GSIM Id' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          {{ element.gsimId }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.childGSIMAccounts[0].productName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Balance">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.parentBalance }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.savingsStatus }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="gsimAccountsColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: gsimAccountsColumns"
-        [routerLink]="['../', 'savings-accounts', 'gsim-account', row.accountNumber]"
-      ></tr>
-    </table>
-  </div>
-
-  <div *ngIf="glimAccounts">
-    <div class="layout-row align-start table-header">
-      <div class="m-b-10">
-        <h3>{{ 'labels.heading.GLIM Loans Account Overview' | translate }}</h3>
-      </div>
-    </div>
-
-    <!-- GLIM Loans Accounts Table -->
-    <table mat-table [dataSource]="glimAccounts" class="mat-elevation-z1 m-b-30">
-      <ng-container matColumnDef="GLIM Id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GLIM Id' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          {{ element.glimId }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.childGLIMAccounts[0].productName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.loanStatus }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="glimAccountsColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: glimAccountsColumns"
-        [routerLink]="['../', 'loans-accounts', 'glim-account', row.glimId]"
-      ></tr>
-    </table>
-  </div>
-
-  <div *ngIf="savingAccounts">
-    <div class="layout-row align-start table-header">
-      <div class="m-b-10">
-        <h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
-      </div>
-      <div class="action-button m-b-10">
-        <button
-          *ngIf="(savingAccounts | accountsFilter: 'saving' : 'closed').length"
-          mat-raised-button
-          class="f-right"
-          color="primary"
-          (click)="toggleSavingAccountsOverview()"
+      <!-- Open Loan Accounts Table -->
+      @if (!showClosedLoanAccounts) {
+        <table mat-table [dataSource]="loanAccounts | accountsFilter: 'loan'" class="mat-elevation-z1 m-b-30">
+          <ng-container matColumnDef="Account No">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-stop"
+                [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+                [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
+              ></i>
+              {{ element.accountNo }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Loan Account">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Original Loan">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.originalLoan }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Loan Balance">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Amount Paid">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.amountPaid }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Type">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-large"
+                [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+                [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
+              ></i>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Actions">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+            <td mat-cell *matCellDef="let element">
+              @if (element.status.active) {
+                <button class="account-action-button" mat-raised-button color="primary">
+                  <i class="fa fa-dollar" matTooltip="{{ 'tooltips.Make Repayment' | translate }}"></i>
+                </button>
+              }
+              @if (element.status.pendingApproval) {
+                <button class="account-action-button" mat-raised-button color="primary">
+                  <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
+                </button>
+              }
+              @if (!element.status.pendingApproval && !element.status.active && !element.status.overpaid) {
+                <button class="account-action-button" mat-raised-button color="primary">
+                  <i class="fa fa-flag" matTooltip="{{ 'tooltips.Disburse' | translate }}"></i>
+                </button>
+              }
+              @if (!element.status.pendingApproval && !element.status.active && element.status.overpaid) {
+                <button class="account-action-button" mat-raised-button color="primary">
+                  <i class="fa fa-exchange" matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"></i>
+                </button>
+              }
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: openLoansColumns"
+            [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+          ></tr>
+        </table>
+      }
+      <!-- Closed Loan Accounts Table-->
+      @if (showClosedLoanAccounts) {
+        <table
+          mat-table
+          [dataSource]="loanAccounts | accountsFilter: 'loan' : 'closed'"
+          class="mat-elevation-z1 m-b-30"
         >
-          {{ showClosedSavingAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
-        </button>
-      </div>
+          <ng-container matColumnDef="Account No">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-stop"
+                [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+                [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
+              ></i>
+              {{ element.accountNo }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Loan Account">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Original Loan">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Loan Balance">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Amount Paid">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Type">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-large"
+                [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+                [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
+              ></i>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Closed Date">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: closedLoansColumns"
+            [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+          ></tr>
+        </table>
+      }
     </div>
+  }
 
-    <!-- Open Savings Accounts Table -->
-    <table
-      *ngIf="!showClosedSavingAccounts"
-      mat-table
-      [dataSource]="savingAccounts | accountsFilter: 'saving'"
-      class="mat-elevation-z1 m-b-30"
-    >
-      <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
-        <td mat-cell *matCellDef="let element">
-          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
-          {{ element.accountNo }}
-        </td>
-      </ng-container>
+  @if (gsimAccounts) {
+    <div>
+      <div class="layout-row align-start table-header">
+        <div class="m-b-10">
+          <h3>{{ 'labels.heading.GSIM Account Overview' | translate }}</h3>
+        </div>
+      </div>
+      <!-- GSIM Accounts Table -->
+      <table mat-table [dataSource]="gsimAccounts" class="mat-elevation-z1 m-b-30">
+        <ng-container matColumnDef="GSIM Id">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GSIM Id' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            {{ element.gsimId }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="Account Number">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Product">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.childGSIMAccounts[0].productName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Balance">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.parentBalance }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Status">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.savingsStatus }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="gsimAccountsColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: gsimAccountsColumns"
+          [routerLink]="['../', 'savings-accounts', 'gsim-account', row.accountNumber]"
+        ></tr>
+      </table>
+    </div>
+  }
 
-      <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
-      </ng-container>
+  @if (glimAccounts) {
+    <div>
+      <div class="layout-row align-start table-header">
+        <div class="m-b-10">
+          <h3>{{ 'labels.heading.GLIM Loans Account Overview' | translate }}</h3>
+        </div>
+      </div>
+      <!-- GLIM Loans Accounts Table -->
+      <table mat-table [dataSource]="glimAccounts" class="mat-elevation-z1 m-b-30">
+        <ng-container matColumnDef="GLIM Id">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GLIM Id' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            {{ element.glimId }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="Account Number">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Product">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.childGLIMAccounts[0].productName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Original Loan">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
+        </ng-container>
+        <ng-container matColumnDef="Status">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.loanStatus }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="glimAccountsColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: glimAccountsColumns"
+          [routerLink]="['../', 'loans-accounts', 'glim-account', row.glimId]"
+        ></tr>
+      </table>
+    </div>
+  }
 
-      <ng-container matColumnDef="Last Active">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Balance">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <button
-            *ngIf="element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
-          >
-            <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
-          >
-            <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="element.status.submittedAndPendingApproval"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
-          >
-            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
-          >
-            <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
-          </button>
-          <button
-            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="routeEdit($event)"
-            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
-          >
-            <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: openSavingsColumns"
-        [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
-      ></tr>
-    </table>
-
-    <!-- Closed Saving Accounts Table -->
-    <table
-      *ngIf="showClosedSavingAccounts"
-      mat-table
-      [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed'"
-      class="mat-elevation-z1 m-b-30"
-    >
-      <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
-        <td mat-cell *matCellDef="let element">
-          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
-          {{ element.accountNo }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: closedSavingsColumns"
-        [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
-      ></tr>
-    </table>
-  </div>
+  @if (savingAccounts) {
+    <div>
+      <div class="layout-row align-start table-header">
+        <div class="m-b-10">
+          <h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
+        </div>
+        <div class="action-button m-b-10">
+          @if ((savingAccounts | accountsFilter: 'saving' : 'closed').length) {
+            <button mat-raised-button class="f-right" color="primary" (click)="toggleSavingAccountsOverview()">
+              {{ showClosedSavingAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
+            </button>
+          }
+        </div>
+      </div>
+      <!-- Open Savings Accounts Table -->
+      @if (!showClosedSavingAccounts) {
+        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving'" class="mat-elevation-z1 m-b-30">
+          <ng-container matColumnDef="Account No">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-stop"
+                [ngClass]="element.status.code | statusLookup"
+                [matTooltip]="element.status.value"
+              ></i>
+              {{ element.accountNo }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Saving Account">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Last Active">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Balance">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Actions">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+            <td mat-cell *matCellDef="let element">
+              @if (element.status.active) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+                >
+                  <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
+                </button>
+              }
+              @if (element.status.active) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+                >
+                  <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
+                </button>
+              }
+              @if (element.status.submittedAndPendingApproval) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+                >
+                  <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
+                </button>
+              }
+              @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+                >
+                  <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
+                </button>
+              }
+              @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
+                >
+                  <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
+                </button>
+              }
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: openSavingsColumns"
+            [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+          ></tr>
+        </table>
+      }
+      <!-- Closed Saving Accounts Table -->
+      @if (showClosedSavingAccounts) {
+        <table
+          mat-table
+          [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed'"
+          class="mat-elevation-z1 m-b-30"
+        >
+          <ng-container matColumnDef="Account No">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+            <td mat-cell *matCellDef="let element">
+              <i
+                class="fa fa-stop"
+                [ngClass]="element.status.code | statusLookup"
+                [matTooltip]="element.status.value"
+              ></i>
+              {{ element.accountNo }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Saving Account">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Closed Date">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: closedSavingsColumns"
+            [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+          ></tr>
+        </table>
+      }
+    </div>
+  }
 </div>

src/app/groups/groups-view/general-tab/general-tab.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   MatTable,
   MatColumnDef,
@@ -48,6 +48,9 @@ import { GroupsService } from '../../groups.service';
   ]
 })
 export class GeneralTabComponent {
+  private route = inject(ActivatedRoute);
+  private groupsService = inject(GroupsService);
+
   /** Group's all accounts data */
   groupAccountData: any;
   /** Group's loan accounts data */
@@ -124,10 +127,7 @@ export class GeneralTabComponent {
   /** Boolean for toggling savings accounts table */
   showClosedSavingAccounts = false;
 
-  constructor(
-    private route: ActivatedRoute,
-    private groupsService: GroupsService
-  ) {
+  constructor() {
     this.route.data.subscribe(
       (data: { groupAccountsData: any; groupClientMembers: any; groupSummary: any; glimData: any; gsimData: any }) => {
         this.glimAccounts = data.glimData;

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html

@@ -14,10 +14,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activationDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateGroupForm.controls.activationDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateGroupForm.controls.activationDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
         </mat-form-field>
       </mat-card-content>
 

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ActivateGroupComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -38,14 +45,7 @@ export class ActivateGroupComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.groupId = this.route.parent.snapshot.params['groupId'];
   }
 

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html

@@ -15,54 +15,74 @@
             />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupMeetingForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupMeetingForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
             {{ 'labels.inputs.Repeats' | translate }}?
           </mat-checkbox>
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('frequency')">
-            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
-            <mat-select formControlName="frequency">
-              <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
-                {{ option.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('frequency')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
+              <mat-select formControlName="frequency">
+                @for (option of frequencyOptions; track option) {
+                  <mat-option [value]="option.id">
+                    {{ option.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('interval')">
-            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
-            <mat-select formControlName="interval">
-              <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
-                {{ interval }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('interval')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
+              <mat-select formControlName="interval">
+                @for (interval of repetitionIntervals; track interval) {
+                  <mat-option [value]="interval">
+                    {{ interval }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.interval.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('repeatsOnDay')">
-            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-            <mat-select formControlName="repeatsOnDay" required>
-              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-                {{ day.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-              {{ 'labels.inputs.day must be selected' | translate }}
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('repeatsOnDay')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+              <mat-select formControlName="repeatsOnDay" required>
+                @for (day of repeatsOnDays; track day) {
+                  <mat-option [value]="day.id">
+                    {{ day.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+                  {{ 'labels.inputs.day must be selected' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          }
         </div>
       </mat-card-content>
 

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AttachGroupMeetingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -55,14 +62,7 @@ export class AttachGroupMeetingComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.frequencyOptions = this.calendarTemplate.frequencyOptions;

src/app/groups/groups-view/group-actions/close-group/close-group.component.html

@@ -15,23 +15,29 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeGroupForm.controls.closureDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeGroupForm.controls.closureDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
-              <mat-option *ngFor="let reason of closureData" [value]="reason.id">
-                {{ reason.name }}
-              </mat-option>
+              @for (reason of closureData; track reason) {
+                <mat-option [value]="reason.id">
+                  {{ reason.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="closeGroupForm.controls.closureReasonId.hasError('required')">
-              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeGroupForm.controls.closureReasonId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/close-group/close-group.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CloseGroupComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class CloseGroupComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.closureData = data.groupActionData.closureReasons;
     });

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -6,14 +6,18 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
             <mat-select formControlName="presentMeetingDate">
-              <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-                {{ date | dateFormat }}
-              </mat-option>
+              @for (date of nextMeetingDates; track date) {
+                <mat-option [value]="date">
+                  {{ date | dateFormat }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="newMeetingDatePicker.open()">
@@ -28,10 +32,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-              {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditGroupMeetingScheduleComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -47,14 +54,7 @@ export class EditGroupMeetingScheduleComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.nextMeetingDates = this.calendarTemplate.nextTenRecurringDates;

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -13,41 +13,55 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
-              <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
-                {{ option.value }}
-              </mat-option>
+              @for (option of frequencyOptions; track option) {
+                <mat-option [value]="option.id">
+                  {{ option.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
-              <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
-                {{ interval }}
-              </mat-option>
+              @for (interval of repetitionIntervals; track interval) {
+                <mat-option [value]="interval">
+                  {{ interval }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="groupEditMeetingForm.contains('repeatsOnDay')">
-            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-            <mat-select formControlName="repeatsOnDay" required>
-              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-                {{ day.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-              {{ 'labels.inputs.day must be selected' | translate }}
-            </mat-error>
-          </mat-form-field>
+          @if (groupEditMeetingForm.contains('repeatsOnDay')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+              <mat-select formControlName="repeatsOnDay" required>
+                @for (day of repeatsOnDays; track day) {
+                  <mat-option [value]="day.id">
+                    {{ day.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+                  {{ 'labels.inputs.day must be selected' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
@@ -61,10 +75,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupEditMeetingForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
             <mat-hint>
               {{ "labels.text.Repeats' and 'Repeats every" | translate }}
             </mat-hint>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -31,6 +31,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditGroupMeetingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -59,14 +66,7 @@ export class EditGroupMeetingComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.frequencyOptions = this.calendarTemplate.frequencyOptions;

src/app/groups/groups-view/group-actions/group-actions.component.html

@@ -1,9 +1,27 @@
-<mifosx-group-assign-staff *ngIf="actions['Assign Staff']"></mifosx-group-assign-staff>
-<mifosx-close-group *ngIf="actions['Close']"></mifosx-close-group>
-<mifosx-activate-group *ngIf="actions['Activate']"></mifosx-activate-group>
-<mifosx-attach-group-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-group-meeting>
-<mifosx-group-attendance *ngIf="actions['Attendance']"></mifosx-group-attendance>
-<mifosx-manage-group-members *ngIf="actions['Manage Members']"></mifosx-manage-group-members>
-<mifosx-edit-group-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-group-meeting>
-<mifosx-edit-group-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-group-meeting-schedule>
-<mifosx-group-transfer-clients *ngIf="actions['Transfer Clients']"></mifosx-group-transfer-clients>
+@if (actions['Assign Staff']) {
+  <mifosx-group-assign-staff></mifosx-group-assign-staff>
+}
+@if (actions['Close']) {
+  <mifosx-close-group></mifosx-close-group>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-group></mifosx-activate-group>
+}
+@if (actions['Attach Meeting']) {
+  <mifosx-attach-group-meeting></mifosx-attach-group-meeting>
+}
+@if (actions['Attendance']) {
+  <mifosx-group-attendance></mifosx-group-attendance>
+}
+@if (actions['Manage Members']) {
+  <mifosx-manage-group-members></mifosx-manage-group-members>
+}
+@if (actions['Edit Meeting']) {
+  <mifosx-edit-group-meeting></mifosx-edit-group-meeting>
+}
+@if (actions['Edit Meeting Schedule']) {
+  <mifosx-edit-group-meeting-schedule></mifosx-edit-group-meeting-schedule>
+}
+@if (actions['Transfer Clients']) {
+  <mifosx-group-transfer-clients></mifosx-group-transfer-clients>
+}

src/app/groups/groups-view/group-actions/group-actions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { GroupAssignStaffComponent } from './group-assign-staff/group-assign-staff.component';
 import { CloseGroupComponent } from './close-group/close-group.component';
@@ -33,6 +33,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupActionsComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Flag object to store possible actions and render appropriate UI to the user */
   actions: {
     'Assign Staff': boolean;
@@ -60,10 +63,7 @@ export class GroupActionsComponent {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
     const action = this.route.snapshot.params['action'];
     if (action && action in this.actions) {

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html

@@ -6,14 +6,18 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
-              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                {{ staff.displayName }}
-              </mat-option>
+              @for (staff of staffData; track staff) {
+                <mat-option [value]="staff.id">
+                  {{ staff.displayName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupAssignStaffForm.controls.staffId.hasError('required')">
-              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupAssignStaffForm.controls.staffId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupAssignStaffComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Group Assign Staff form. */
   groupAssignStaffForm: UntypedFormGroup;
   /** Staff Data */
@@ -33,12 +38,7 @@ export class GroupAssignStaffComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
     });

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
@@ -64,6 +64,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupAttendanceComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  private groupsService = inject(GroupsService);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
   /** Members data. */
   membersData: any;
   /** Group Data */
@@ -91,14 +98,7 @@ export class GroupAttendanceComponent implements OnInit {
    * @param {MatDialog} dialog Mat Dialog
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    private groupsService: GroupsService,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.membersData = data.groupActionData.clientMembers;
@@ -140,7 +140,6 @@ export class GroupAttendanceComponent implements OnInit {
         options: { label: 'value', value: 'id', data: this.attendanceTypeOptions },
         required: false
       })
-
     ];
     const data = {
       title: 'Assign Member Attendance',

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -6,9 +6,11 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Select Client Members for Transfer' | translate }}</mat-label>
             <mat-select required formControlName="clients" multiple>
-              <mat-option *ngFor="let member of clientMembers" [value]="{ id: member.id }">
-                {{ member.displayName }}
-              </mat-option>
+              @for (member of clientMembers; track member) {
+                <mat-option [value]="{ id: member.id }">
+                  {{ member.displayName }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -23,50 +25,58 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Destination Group' | translate }}</mat-label>
             <input matInput formControlName="destinationGroupId" [matAutocomplete]="groupsAutocomplete" />
-            <mat-error *ngIf="transferClientsForm.controls.destinationGroupId.hasError('required')">
-              {{ 'labels.inputs.Destination Group' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (transferClientsForm.controls.destinationGroupId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Destination Group' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
-          <mat-option *ngFor="let group of groupsData" [value]="group">
-            {{ group.name }}
-          </mat-option>
+          @for (group of groupsData; track group) {
+            <mat-option [value]="group">
+              {{ group.name }}
+            </mat-option>
+          }
         </mat-autocomplete>
 
-        <div class="mat-table" *ngIf="transferClientsForm.get('destinationGroupId').value?.id">
-          <div class="mat-header-row">
-            <div class="mat-header-cell">{{ 'labels.inputs.Destination Group Details' | translate }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
-            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.name }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
-            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.id }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Activation Date' | translate }}</div>
-            <div class="mat-cell">
-              {{ (transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated' }}
+        @if (transferClientsForm.get('destinationGroupId').value?.id) {
+          <div class="mat-table">
+            <div class="mat-header-row">
+              <div class="mat-header-cell">{{ 'labels.inputs.Destination Group Details' | translate }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+              <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.name }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+              <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.id }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Activation Date' | translate }}</div>
+              <div class="mat-cell">
+                {{
+                  (transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated'
+                }}
+              </div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Staff' | translate }}</div>
+              <div class="mat-cell">
+                {{ transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned' }}
+              </div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.External Id' | translate }}</div>
+              <div class="mat-cell">
+                {{ transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned' }}
+              </div>
             </div>
           </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Staff' | translate }}</div>
-            <div class="mat-cell">
-              {{ transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned' }}
-            </div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.External Id' | translate }}</div>
-            <div class="mat-cell">
-              {{ transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned' }}
-            </div>
-          </div>
-        </div>
+        }
       </mat-card-content>
 
       <mat-card-actions class="layout-row align-center gap-5px responsive-column">

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupTransferClientsComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private groupsService = inject(GroupsService);
+  private settingsService = inject(SettingsService);
+
   /** Transfer Clients form. */
   transferClientsForm: UntypedFormGroup;
   /** Group Data */
@@ -46,13 +52,7 @@ export class GroupTransferClientsComponent implements OnInit, AfterViewInit {
    * @param {GroupsService} groupsService GroupsService.
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private groupsService: GroupsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.clientMembers = this.groupData.clientMembers;

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html

@@ -6,9 +6,11 @@
     </mat-form-field>
 
     <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
-      <mat-option *ngFor="let client of clientsData" [value]="client">
-        {{ client.displayName }}
-      </mat-option>
+      @for (client of clientsData; track client) {
+        <mat-option [value]="client">
+          {{ client.displayName }}
+        </mat-option>
+      }
     </mat-autocomplete>
 
     <div class="mat-table">
@@ -36,20 +38,24 @@
   <mat-card class="flex-50">
     <h3 matSubheader>{{ 'labels.heading.Client Members' | translate }}</h3>
 
-    <mat-nav-list *ngIf="clientMembers?.length">
-      <div mat-list-item *ngFor="let client of clientMembers; index as i">
-        <span matLine class="p-t-10">{{ client.displayName }}</span>
-        <div class="flex-fill"></div>
-        <button
-          mat-icon-button
-          color="warn"
-          (click)="removeClient(i, client)"
-          matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}"
-          matTooltipPosition="left"
-        >
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-    </mat-nav-list>
+    @if (clientMembers?.length) {
+      <mat-nav-list>
+        @for (client of clientMembers; track client; let i = $index) {
+          <div mat-list-item>
+            <span matLine class="p-t-10">{{ client.displayName }}</span>
+            <div class="flex-fill"></div>
+            <button
+              mat-icon-button
+              color="warn"
+              (click)="removeClient(i, client)"
+              matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}"
+              matTooltipPosition="left"
+            >
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+          </div>
+        }
+      </mat-nav-list>
+    }
   </mat-card>
 </div>

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, inject } from '@angular/core';
 import { FormGroup, FormBuilder, UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -38,6 +38,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageGroupMembersComponent implements AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private groupsService = inject(GroupsService);
+  private clientsService = inject(ClientsService);
+  dialog = inject(MatDialog);
+
   /** Group Data */
   groupData: any;
   /** Client data. */
@@ -54,12 +59,7 @@ export class ManageGroupMembersComponent implements AfterViewInit {
    * @param {ClientsService} clientsService Clients Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private groupsService: GroupsService,
-    private clientsService: ClientsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.clientMembers = data.groupActionData.clientMembers || [];

src/app/groups/groups-view/groups-view.component.html

@@ -35,22 +35,28 @@
             <b>{{ 'labels.inputs.Office Name' | translate }} :</b> {{ groupViewData.officeName }}<br />
             <b>{{ 'labels.inputs.Activation Date' | translate }} :</b>
             {{ groupViewData.activationDate ? (groupViewData.activationDate | dateFormat) : 'Not Activated' }}<br />
-            <span *ngIf="!groupViewData.active">
-              <b>{{ 'labels.inputs.Closure Date' | translate }} :</b>
-              {{ groupViewData.timeline.closedOnDate | dateFormat }}
-            </span>
+            @if (!groupViewData.active) {
+              <span>
+                <b>{{ 'labels.inputs.Closure Date' | translate }} :</b>
+                {{ groupViewData.timeline.closedOnDate | dateFormat }}
+              </span>
+            }
           </div>
           <div class="group-meeting flex-45 align-start-start">
-            <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
-              <p>
-                {{ 'labels.inputs.Next Meeting on' | translate }}:
-                {{ groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
-                <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br />
-                {{ 'labels.inputs.Meeting Frequency' | translate }}:
-                {{ groupViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
-              </p>
-            </div>
-            <ng-template #unassigned>
+            @if (groupViewData.collectionMeetingCalendar) {
+              <div>
+                <p>
+                  {{ 'labels.inputs.Next Meeting on' | translate }}:
+                  {{ groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
+                  @if (editMeeting) {
+                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')"></i>
+                  }
+                  <br />
+                  {{ 'labels.inputs.Meeting Frequency' | translate }}:
+                  {{ groupViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
+                </p>
+              </div>
+            } @else {
               <div>
                 <p>
                   {{ 'labels.inputs.Next Meeting on' | translate }}: {{ 'labels.inputs.Unassigned' | translate }}
@@ -58,20 +64,22 @@
                   {{ 'labels.inputs.Meeting Frequency' | translate }}: {{ 'labels.inputs.N/A' | translate }}
                 </p>
               </div>
-            </ng-template>
+            }
           </div>
         </mat-card-subtitle>
       </div>
 
       <mat-menu #groupMenu="matMenu">
-        <span *ngIf="!(groupViewData.status.value === 'Active')">
-          <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Activate')">
-            <mat-icon matListIcon>
-              <fa-icon icon="checkSign" size="sm"></fa-icon>
-            </mat-icon>
-            <span>{{ 'labels.buttons.Activate' | translate }}</span>
-          </button>
-        </span>
+        @if (!(groupViewData.status.value === 'Active')) {
+          <span>
+            <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Activate')">
+              <mat-icon matListIcon>
+                <fa-icon icon="checkSign" size="sm"></fa-icon>
+              </mat-icon>
+              <span>{{ 'labels.buttons.Activate' | translate }}</span>
+            </button>
+          </span>
+        }
         <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Edit')">
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
@@ -91,19 +99,23 @@
           <span>{{ 'labels.buttons.Manage Members' | translate }}</span>
         </button>
 
-        <button mat-menu-item *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
-          <mat-icon matListIcon>
-            <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
-          </mat-icon>
-          <span>{{ 'labels.buttons.Applications' | translate }}</span>
-        </button>
+        @if (groupViewData.active) {
+          <button mat-menu-item [matMenuTriggerFor]="AccountApplications">
+            <mat-icon matListIcon>
+              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <span>{{ 'labels.buttons.Applications' | translate }}</span>
+          </button>
+        }
 
         <mat-menu #AccountApplications="matMenu">
-          <span *ngIf="groupViewData.clientMembers">
-            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">
-              {{ 'labels.buttons.Bulk JLG Loan Application' | translate }}
-            </button></span
-          >
+          @if (groupViewData.clientMembers) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">
+                {{ 'labels.buttons.Bulk JLG Loan Application' | translate }}
+              </button></span
+            >
+          }
           <button
             mat-menu-item
             *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
@@ -114,57 +126,67 @@
           <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
             {{ 'labels.buttons.Group Loan Application' | translate }}
           </button>
-          <span *ngIf="groupViewData.clientMembers">
-            <button
-              mat-menu-item
-              *mifosxHasPermission="'CREATE_LOAN'"
-              [routerLink]="['loans-accounts', 'glim-account', 'create']"
-            >
-              {{ 'labels.buttons.GLIM Application' | translate }}
-            </button>
-          </span>
-          <span *ngIf="groupViewData.clientMembers">
-            <button
-              mat-menu-item
-              *mifosxHasPermission="'CREATE_GSIMACCOUNT'"
-              [routerLink]="['savings-accounts', 'gsim-account', 'create']"
-            >
-              {{ 'labels.buttons.GSIM Application' | translate }}
-            </button>
-          </span>
+          @if (groupViewData.clientMembers) {
+            <span>
+              <button
+                mat-menu-item
+                *mifosxHasPermission="'CREATE_LOAN'"
+                [routerLink]="['loans-accounts', 'glim-account', 'create']"
+              >
+                {{ 'labels.buttons.GLIM Application' | translate }}
+              </button>
+            </span>
+          }
+          @if (groupViewData.clientMembers) {
+            <span>
+              <button
+                mat-menu-item
+                *mifosxHasPermission="'CREATE_GSIMACCOUNT'"
+                [routerLink]="['savings-accounts', 'gsim-account', 'create']"
+              >
+                {{ 'labels.buttons.GSIM Application' | translate }}
+              </button>
+            </span>
+          }
         </mat-menu>
 
         <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
         <mat-menu #More="matMenu">
-          <span *ngIf="groupViewData.collectionMeetingCalendar">
-            <button
-              mat-menu-item
-              *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-              (click)="doAction('Attendance')"
+          @if (groupViewData.collectionMeetingCalendar) {
+            <span>
+              <button
+                mat-menu-item
+                *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+                (click)="doAction('Attendance')"
+              >
+                {{ 'labels.buttons.Attendance' | translate }}
+              </button></span
             >
-              {{ 'labels.buttons.Attendance' | translate }}
-            </button></span
-          >
-          <span *ngIf="!groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
-              {{ 'labels.buttons.Assign Staff' | translate }}
-            </button></span
-          >
-          <span *ngIf="groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
-              {{ 'labels.buttons.Unassign Staff' | translate }}
-            </button></span
-          >
-          <span
-            *ngIf="
-              !(groupViewData.centerId || groupViewData.collectionMeetingCalendar) &&
-              groupViewData.status.value === 'Active'
-            "
-          >
-            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
-              {{ 'labels.buttons.Attach Meeting' | translate }}
-            </button></span
-          >
+          }
+          @if (!groupViewData.staffId) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
+                {{ 'labels.buttons.Assign Staff' | translate }}
+              </button></span
+            >
+          }
+          @if (groupViewData.staffId) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
+                {{ 'labels.buttons.Unassign Staff' | translate }}
+              </button></span
+            >
+          }
+          @if (
+            !(groupViewData.centerId || groupViewData.collectionMeetingCalendar) &&
+            groupViewData.status.value === 'Active'
+          ) {
+            <span>
+              <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
+                {{ 'labels.buttons.Attach Meeting' | translate }}
+              </button></span
+            >
+          }
           <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">
             {{ 'labels.buttons.Close' | translate }}
           </button>
@@ -206,18 +228,20 @@
       >
         {{ 'labels.inputs.Committee' | translate }}
       </a>
-      <span *ngFor="let groupDatatable of groupDatatables">
-        <a
-          mat-tab-link
-          *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"
-          [routerLink]="['./datatables', groupDatatable.registeredTableName]"
-          routerLinkActive
-          #datatable="routerLinkActive"
-          [active]="datatable.isActive"
-        >
-          {{ groupDatatable.registeredTableName }}
-        </a>
-      </span>
+      @for (groupDatatable of groupDatatables; track groupDatatable) {
+        <span>
+          <a
+            mat-tab-link
+            *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"
+            [routerLink]="['./datatables', groupDatatable.registeredTableName]"
+            routerLinkActive
+            #datatable="routerLinkActive"
+            [active]="datatable.isActive"
+          >
+            {{ groupDatatable.registeredTableName }}
+          </a>
+        </span>
+      }
     </nav>
 
     <mat-tab-nav-panel #tabPanel>

src/app/groups/groups-view/groups-view.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -18,7 +18,7 @@ import {
   MatCardSubtitle,
   MatCardContent
 } from '@angular/material/card';
-import { NgClass, NgIf, NgFor, LowerCasePipe } from '@angular/common';
+import { NgClass, LowerCasePipe } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -62,6 +62,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupsViewComponent {
+  private route = inject(ActivatedRoute);
+  private groupsService = inject(GroupsService);
+  private router = inject(Router);
+  dialog = inject(MatDialog);
+
   /** Group view data */
   groupViewData: any;
   /** Group datatables data */
@@ -74,12 +79,7 @@ export class GroupsViewComponent {
    * @param {Router} router Router
    * @param {MatDialog} dialog Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private groupsService: GroupsService,
-    private router: Router,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupViewData: any; groupDatatables: any }) => {
       this.groupViewData = data.groupViewData;
       this.groupDatatables = data.groupDatatables;

src/app/groups/groups-view/notes-tab/notes-tab.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -23,6 +23,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class NotesTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private authenticationService = inject(AuthenticationService);
+  private groupsService = inject(GroupsService);
+
   /** Group ID */
   entityId: string;
   /** Username */
@@ -36,11 +40,7 @@ export class NotesTabComponent implements OnInit {
    * @param {GroupsService} groupsService Groups Service
    * @param {AuthenticationService} authenticationService Authentication Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private authenticationService: AuthenticationService,
-    private groupsService: GroupsService
-  ) {
+  constructor() {
     this.entityId = this.route.parent.snapshot.params['groupId'];
     this.addNote = this.addNote.bind(this);
   }