From a6cfaf1a096d3cd425d3a5cf9ac069925854a9e4 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Tue, 11 Nov 2025 09:16:39 +0100
Subject: [PATCH] refactor: convert ghost-loading-indicator to signal input

---
 .../lib/components/datatable.component.html   |  2 +-
 .../src/lib/components/datatable.component.ts | 26 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html
index 681dca3a8..bcc35873c 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.html
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.html
@@ -40,7 +40,7 @@
       [scrollbarH]="scrollbarH()"
       [virtualization]="virtualization()"
       [loadingIndicator]="loadingIndicator()"
-      [ghostLoadingIndicator]="ghostLoadingIndicator"
+      [ghostLoadingIndicator]="ghostLoadingIndicator()"
       [externalPaging]="externalPaging()"
       [rowHeight]="rowHeight()"
       [rowCount]="rowCount"
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
index 08ab4486e..83e07481d 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.ts
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -309,16 +309,7 @@ export class DatatableComponent<TRow extends Row = any>
    * Show ghost loaders on each cell.
    * Default value: `false`
    */
-  @Input({ transform: booleanAttribute }) set ghostLoadingIndicator(val: boolean) {
-    this._ghostLoadingIndicator = val;
-    if (val && this.scrollbarV() && !this.externalPaging()) {
-      // in case where we don't have predefined total page length
-      this.rows = [...this.rows, undefined]; // undefined row will render ghost cell row at the end of the page
-    }
-  }
-  get ghostLoadingIndicator(): boolean {
-    return this._ghostLoadingIndicator;
-  }
+  readonly ghostLoadingIndicator = input(false, { transform: booleanAttribute });
 
   /**
    * Type of row selection. Options are:
@@ -742,7 +733,6 @@ export class DatatableComponent<TRow extends Row = any>
   _internalColumns!: TableColumnInternal<TRow>[];
   _columns!: TableColumn[];
   _subscriptions: Subscription[] = [];
-  _ghostLoadingIndicator = false;
   _defaultColumnWidth = this.configuration?.defaultColumnWidth ?? 150;
   /**
    * To have this available for all components.
@@ -765,6 +755,18 @@ export class DatatableComponent<TRow extends Row = any>
       // Ensure that we do not listen to other properties (yet).
       untracked(() => this.translateColumns(columns));
     });
+
+    // Effect to handle ghost loading indicator changes
+    effect(() => {
+      const ghostLoading = this.ghostLoadingIndicator();
+      // Use untracked to only subscribe to ghostLoadingIndicator changes
+      untracked(() => {
+        if (ghostLoading && this.scrollbarV() && !this.externalPaging()) {
+          // in case where we don't have predefined total page length
+          this.rows = [...this.rows, undefined]; // undefined row will render ghost cell row at the end of the page
+        }
+      });
+    });
   }
 
   /**
@@ -785,7 +787,7 @@ export class DatatableComponent<TRow extends Row = any>
     const rowDiffers = this.rowDiffer.diff(this.rows);
     if (rowDiffers || this.disableRowCheck()) {
       // we don't sort again when ghost loader adds a dummy row
-      if (!this.ghostLoadingIndicator && !this.externalSorting() && this._internalColumns) {
+      if (!this.ghostLoadingIndicator() && !this.externalSorting() && this._internalColumns) {
         this.sortInternalRows();
       } else {
         this._internalRows = [...this.rows];