Upgrading to Angular 20:

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

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -10,47 +10,52 @@
         </button>
       </span>
       <ng-container *mifosxHasPermission="'DELETE_' + datatableName">
-        <span *ngIf="isSelected">
-          <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Delete Selected' | translate }}
-          </button>
-        </span>
+        @if (isSelected) {
+          <span>
+            <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Delete Selected' | translate }}
+            </button>
+          </span>
+        }
       </ng-container>
       <ng-container *mifosxHasPermission="'DELETE_' + datatableName">
-        <span *ngIf="datatableData.length > 0">
-          <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Delete All' | translate }}
-          </button>
-        </span>
+        @if (datatableData.length > 0) {
+          <span>
+            <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Delete All' | translate }}
+            </button>
+          </span>
+        }
       </ng-container>
     </div>
   </div>
 
   <div class="m-t-10">
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-      <ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
-        <ng-container *ngIf="i === 0">
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let data">
-            <mat-checkbox
-              class="center"
-              (click)="$event.stopPropagation()"
-              (change)="$event ? itemToggle(data) : null"
-              [checked]="selection.isSelected(data)"
-            >
-            </mat-checkbox>
-          </td>
+      @for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
+        <ng-container [matColumnDef]="datatableColumn">
+          @if (i === 0) {
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let data">
+              <mat-checkbox
+                class="center"
+                (click)="$event.stopPropagation()"
+                (change)="$event ? itemToggle(data) : null"
+                [checked]="selection.isSelected(data)"
+              >
+              </mat-checkbox>
+            </td>
+          }
+          @if (i > 0) {
+            <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
+            <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
+              {{ formatValue(data, datatableColumn) }}
+            </td>
+          }
         </ng-container>
-
-        <ng-container *ngIf="i > 0">
-          <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
-          <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-            {{ formatValue(data, datatableColumn) }}
-          </td>
-        </ng-container>
-      </ng-container>
+      }
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: datatableColumns"></tr>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { DecimalPipe, NgIf, NgFor, NgClass } from '@angular/common';
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { DecimalPipe, NgClass } from '@angular/common';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, inject } from '@angular/core';
 import { MatCheckboxChange as MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -51,6 +51,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private systemService = inject(SystemService);
+  private settingsService = inject(SettingsService);
+  private dialog = inject(MatDialog);
+  private datatables = inject(Datatables);
+  private dateFormat = inject(DateFormatPipe);
+  private dateTimeFormat = inject(DatetimeFormatPipe);
+  private numberFormat = inject(DecimalPipe);
+
   SELECT_NAME_FIELD = 'select';
   /** Data Object */
   @Input() dataObject: any;
@@ -74,27 +84,6 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   /** Data Table Reference */
   @ViewChild('dataTable') dataTableRef: MatTable<Element>;
 
-  /**
-   * Fetches center Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SystemService} systemService system Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private systemService: SystemService,
-    private settingsService: SettingsService,
-    private dialog: MatDialog,
-    private datatables: Datatables,
-    private dateFormat: DateFormatPipe,
-    private dateTimeFormat: DatetimeFormatPipe,
-    private numberFormat: DecimalPipe
-  ) {}
-
   /**
    * Fetches data table name from route params.
    * subscription is required due to asynchronicity.

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -1,70 +1,92 @@
 <div class="tab-container mat-typography">
   <h3>{{ datatableName }}</h3>
   <div class="layout-row align-end m-b-20">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-    </button>
+    @if (!dataObject.data[0]) {
+      <button mat-raised-button color="primary" (click)="add()">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+      </button>
+    }
+    @if (dataObject.data[0]) {
+      <button mat-raised-button color="primary" (click)="edit()">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+      </button>
+    }
+    @if (dataObject.data[0]) {
+      <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+      </button>
+    }
   </div>
 
   <mat-divider></mat-divider>
 
-  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
-    <div
-      class="flex-fill"
-      *ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
-      [ngClass]="setAttributeClass(columnHeader.columnName)"
-    >
-      <div class="mat-body-strong left flex-40">
-        {{ columnHeader.columnDisplayName }}
-        {{ getInputName(columnHeader.columnName) }}
-      </div>
-
-      <div [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right flex-60">
-        <span *ngSwitchCase="'DATE'">
-          {{ dataObject.data[0].row[i] | dateFormat }}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{ dataObject.data[0].row[i] | datetimeFormat }}
-        </span>
-        <span *ngSwitchCase="'INTEGER'">
-          {{ dataObject.data[0].row[i] }}
-        </span>
-        <span *ngSwitchCase="'DECIMAL'">
-          {{ dataObject.data[0].row[i] | formatNumber }}
-        </span>
-        <span *ngSwitchCase="'TEXT'" class="long-text">
-          {{ dataObject.data[0].row[i] }}
-        </span>
-        <textarea
-          *ngSwitchCase="'JSON'"
-          cdkTextareaAutosize="true"
-          cdkAutosizeMaxRows="20"
-          cdkAutosizeMinRows="1"
-          class="json-textarea"
-          [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
-        >
-        </textarea>
-        <span *ngSwitchDefault>
-          <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button
-              mat-icon-button
-              matTooltip="{{ 'tooltips.View Link' | translate }}"
-              (click)="openSite(dataObject.data[0].row[i])"
-              matTooltipPosition="right"
-              class="small-icon"
-            >
-              <fa-icon icon="eye" size="lg"></fa-icon>
-            </button>
-          </span>
-          {{ dataObject.data[0].row[i] }}
-        </span>
-      </div>
+  @if (dataObject.data.length > 0) {
+    <div class="m-t-10">
+      @for (columnHeader of dataObject.columnHeaders; track columnHeader; let i = $index) {
+        <div class="flex-fill" [ngClass]="setAttributeClass(columnHeader.columnName)">
+          <div class="mat-body-strong left flex-40">
+            {{ columnHeader.columnDisplayName }}
+            {{ getInputName(columnHeader.columnName) }}
+          </div>
+          <div class="right flex-60">
+            @switch (getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)) {
+              @case ('DATE') {
+                <span>
+                  {{ dataObject.data[0].row[i] | dateFormat }}
+                </span>
+              }
+              @case ('DATETIME') {
+                <span>
+                  {{ dataObject.data[0].row[i] | datetimeFormat }}
+                </span>
+              }
+              @case ('INTEGER') {
+                <span>
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+              @case ('DECIMAL') {
+                <span>
+                  {{ dataObject.data[0].row[i] | formatNumber }}
+                </span>
+              }
+              @case ('TEXT') {
+                <span class="long-text">
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+              @case ('JSON') {
+                <textarea
+                  cdkTextareaAutosize="true"
+                  cdkAutosizeMaxRows="20"
+                  cdkAutosizeMinRows="1"
+                  class="json-textarea"
+                  [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
+                >
+                </textarea>
+              }
+              @default {
+                <span>
+                  @if (isValidUrl(dataObject.data[0].row[i])) {
+                    <span class="m-r-5">
+                      <button
+                        mat-icon-button
+                        matTooltip="{{ 'tooltips.View Link' | translate }}"
+                        (click)="openSite(dataObject.data[0].row[i])"
+                        matTooltipPosition="right"
+                        class="small-icon"
+                      >
+                        <fa-icon icon="eye" size="lg"></fa-icon>
+                      </button>
+                    </span>
+                  }
+                  {{ dataObject.data[0].row[i] }}
+                </span>
+              }
+            }
+          </div>
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { Datatables } from 'app/core/utils/datatables';
@@ -8,7 +8,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SystemService } from 'app/system/system.service';
-import { NgIf, NgFor, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
@@ -29,10 +29,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FaIconComponent,
     MatDivider,
     NgClass,
-    NgSwitch,
-    NgSwitchCase,
     CdkTextareaAutosize,
-    NgSwitchDefault,
     MatIconButton,
     MatTooltip,
     DateFormatPipe,
@@ -42,27 +39,18 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableSingleRowComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+  private datatables = inject(Datatables);
+  private systemService = inject(SystemService);
+
   @Input() dataObject: any;
   @Input() entityId: string;
   @Input() entityType: string;
   datatableName: string;
 
-  /**
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SystemService} systemService System Service.
-   * @param {SettingsService} settingsService Settings Service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private dialog: MatDialog,
-    private settingsService: SettingsService,
-    private datatables: Datatables,
-    private systemService: SystemService
-  ) {}
-
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html

@@ -1,14 +1,16 @@
 <div>
-  <mifosx-datatable-multi-row
-    *ngIf="multiRowDatatableFlag"
-    [entityType]="entityType"
-    [entityId]="entityId"
-    [dataObject]="entityDatatable"
-  ></mifosx-datatable-multi-row>
-  <mifosx-datatable-single-row
-    *ngIf="!multiRowDatatableFlag"
-    [entityType]="entityType"
-    [entityId]="entityId"
-    [dataObject]="entityDatatable"
-  ></mifosx-datatable-single-row>
+  @if (multiRowDatatableFlag) {
+    <mifosx-datatable-multi-row
+      [entityType]="entityType"
+      [entityId]="entityId"
+      [dataObject]="entityDatatable"
+    ></mifosx-datatable-multi-row>
+  }
+  @if (!multiRowDatatableFlag) {
+    <mifosx-datatable-single-row
+      [entityType]="entityType"
+      [entityId]="entityId"
+      [dataObject]="entityDatatable"
+    ></mifosx-datatable-single-row>
+  }
 </div>

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -9,59 +9,71 @@
     </div>
   </div>
 
-  <div *ngIf="entityDocuments?.length; else empty">
-    <div class="document-grid">
-      <div class="document-card" *ngFor="let document of entityDocuments; trackBy: trackByDocumentId">
-        <div
-          class="thumb"
-          [class.clickable]="isPreviewable(document)"
-          role="button"
-          tabindex="0"
-          [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
-          (keydown.enter)="isPreviewable(document) && openPreview(document)"
-          (keydown.space)="isPreviewable(document) && openPreview(document)"
-          (click)="isPreviewable(document) && openPreview(document)"
-        >
-          <ng-container *ngIf="previewThumbnails[document.id]; else placeholder">
-            <img [src]="previewThumbnails[document.id]" [alt]="document.name" [title]="document.name" loading="lazy" />
-          </ng-container>
-          <ng-template #placeholder>
-            <div class="placeholder">
-              <fa-icon icon="file"></fa-icon>
-              <span>{{ document.fileName || document.name }}</span>
-            </div>
-          </ng-template>
-          <div class="preview-overlay" *ngIf="isPreviewable(document)">
-            <fa-icon icon="eye"></fa-icon>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="title">{{ document.name }}</div>
-          <div class="meta" *ngIf="document.fileName">{{ document.fileName }}</div>
-          <div class="description" *ngIf="document.description">{{ document.description }}</div>
-          <div class="actions">
-            <button
-              mat-icon-button
-              color="warn"
-              (click)="deleteDocument(document.id, document.name)"
-              title="Delete"
-              [attr.aria-label]="'labels.buttons.Delete' | translate"
-              *mifosxHasPermission="'DELETE_DOCUMENT'"
+  @if (entityDocuments?.length) {
+    <div>
+      <div class="document-grid">
+        @for (document of entityDocuments; track trackByDocumentId($index, document)) {
+          <div class="document-card">
+            <div
+              class="thumb"
+              [class.clickable]="isPreviewable(document)"
+              role="button"
+              tabindex="0"
+              [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
+              (keydown.enter)="isPreviewable(document) && openPreview(document)"
+              (keydown.space)="isPreviewable(document) && openPreview(document)"
+              (click)="isPreviewable(document) && openPreview(document)"
             >
-              <fa-icon icon="times"></fa-icon>
-            </button>
+              @if (previewThumbnails[document.id]) {
+                <img
+                  [src]="previewThumbnails[document.id]"
+                  [alt]="document.name"
+                  [title]="document.name"
+                  loading="lazy"
+                />
+              } @else {
+                <div class="placeholder">
+                  <fa-icon icon="file"></fa-icon>
+                  <span>{{ document.fileName || document.name }}</span>
+                </div>
+              }
+              @if (isPreviewable(document)) {
+                <div class="preview-overlay">
+                  <fa-icon icon="eye"></fa-icon>
+                </div>
+              }
+            </div>
+            <div class="card-body">
+              <div class="title">{{ document.name }}</div>
+              @if (document.fileName) {
+                <div class="meta">{{ document.fileName }}</div>
+              }
+              @if (document.description) {
+                <div class="description">{{ document.description }}</div>
+              }
+              <div class="actions">
+                <button
+                  mat-icon-button
+                  color="warn"
+                  (click)="deleteDocument(document.id, document.name)"
+                  title="Delete"
+                  [attr.aria-label]="'labels.buttons.Delete' | translate"
+                  *mifosxHasPermission="'DELETE_DOCUMENT'"
+                >
+                  <fa-icon icon="times"></fa-icon>
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
+        }
       </div>
     </div>
-  </div>
-
-  <ng-template #empty>
+  } @else {
     <div class="empty-state">
       <p>{{ 'labels.text.NoDocuments' | translate }}</p>
       <p class="muted">{{ 'labels.text.UploadDocumentHint' | translate }}</p>
     </div>
-  </ng-template>
+  }
 </div>
 
 <div #lightboxRoot class="document-lightbox-host"></div>

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import lightGallery from 'lightgallery';
 import lgFullscreen from 'lightgallery/plugins/fullscreen';
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EntityDocumentsTabComponent implements OnInit, OnDestroy {
+  dialog = inject(MatDialog);
+  private savingsService = inject(SavingsService);
+  private loansService = inject(LoansService);
+  private clientsService = inject(ClientsService);
+  private documentPreviewService = inject(DocumentPreviewService);
+
   @ViewChild('lightboxRoot', { static: true }) lightboxRoot: ElementRef<HTMLElement>;
 
   @Input() entityId: string;
@@ -44,14 +50,6 @@ export class EntityDocumentsTabComponent implements OnInit, OnDestroy {
     lgFullscreen
   ];
 
-  constructor(
-    public dialog: MatDialog,
-    private savingsService: SavingsService,
-    private loansService: LoansService,
-    private clientsService: ClientsService,
-    private documentPreviewService: DocumentPreviewService
-  ) {}
-
   ngOnInit(): void {
     this.prefetchThumbnails();
   }

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -25,32 +25,32 @@
   </div>
 
   <div class="notes-container">
-    <div *ngIf="entityNotes && entityNotes.length > 0; else emptyState">
-      <div class="note-card" *ngFor="let entityNote of entityNotes; let i = index">
-        <div class="note-content">
-          {{ entityNote.note }}
-        </div>
-
-        <div class="note-footer">
-          <div class="note-meta">
-            <div class="created-by">Created by {{ entityNote.createdByUsername }}</div>
-            <div class="created-date">
-              {{ entityNote.createdOn | dateFormat }}
+    @if (entityNotes && entityNotes.length > 0) {
+      <div>
+        @for (entityNote of entityNotes; track entityNote; let i = $index) {
+          <div class="note-card">
+            <div class="note-content">
+              {{ entityNote.note }}
+            </div>
+            <div class="note-footer">
+              <div class="note-meta">
+                <div class="created-by">Created by {{ entityNote.createdByUsername }}</div>
+                <div class="created-date">
+                  {{ entityNote.createdOn | dateFormat }}
+                </div>
+              </div>
+              <div class="note-actions">
+                <button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
+                  Edit
+                </button>
+                <button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
+              </div>
             </div>
           </div>
-
-          <div class="note-actions">
-            <button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
-              Edit
-            </button>
-            <button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
-          </div>
-        </div>
+        }
       </div>
-    </div>
-
-    <ng-template #emptyState>
+    } @else {
       <div class="empty-state">No notes available</div>
-    </ng-template>
+    }
   </div>
 </div>

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ClientsService } from 'app/clients/clients.service';
@@ -24,6 +24,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EntityNotesTabComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private loansService = inject(LoansService);
+  private clientsService = inject(ClientsService);
+  private groupsService = inject(GroupsService);
+  private dialog = inject(MatDialog);
+
   @ViewChild('formRef', { static: true }) formRef: any;
 
   @Input() entityId: string;
@@ -35,15 +42,6 @@ export class EntityNotesTabComponent implements OnInit {
 
   noteForm: UntypedFormGroup;
 
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private loansService: LoansService,
-    private clientsService: ClientsService,
-    private groupsService: GroupsService,
-    private dialog: MatDialog
-  ) {}
-
   ngOnInit() {
     this.createNoteForm();
   }