refactor: migrate constructor assigned inputs to signals

For breaking change note refer to 4bfbf62

Author: spike-rabbit

projects/ngx-datatable/src/lib/components/datatable.component.html

@@ -1,6 +1,6 @@
 <div visibilityObserver (visible)="recalculate()">
   <div role="table">
-    @if (headerHeight) {
+    @if (headerHeight()) {
       <datatable-header
         role="rowgroup"
         [sorts]="sorts"
@@ -10,17 +10,17 @@
         [offsetX]="_offsetX"
         [dealsWithGroup]="groupedRows !== undefined"
         [columns]="_internalColumns"
-        [headerHeight]="headerHeight"
+        [headerHeight]="headerHeight()"
         [reorderable]="reorderable()"
         [targetMarkerTemplate]="targetMarkerTemplate()"
-        [sortAscendingIcon]="cssClasses.sortAscending"
-        [sortDescendingIcon]="cssClasses.sortDescending"
-        [sortUnsetIcon]="cssClasses.sortUnset"
+        [sortAscendingIcon]="cssClasses().sortAscending"
+        [sortDescendingIcon]="cssClasses().sortDescending"
+        [sortUnsetIcon]="cssClasses().sortUnset"
         [allRowsSelected]="allRowsSelected"
         [selectionType]="selectionType()"
         [verticalScrollVisible]="verticalScrollVisible"
         [enableClearingSortState]="enableClearingSortState()"
-        [ariaHeaderCheckboxMessage]="messages.ariaHeaderCheckboxMessage ?? 'Select all rows'"
+        [ariaHeaderCheckboxMessage]="messages().ariaHeaderCheckboxMessage ?? 'Select all rows'"
         (sort)="onColumnSort($event)"
         (resize)="onColumnResize($event)"
         (resizing)="onColumnResizing($event)"
@@ -42,7 +42,7 @@
       [loadingIndicator]="loadingIndicator()"
       [ghostLoadingIndicator]="ghostLoadingIndicator"
       [externalPaging]="externalPaging()"
-      [rowHeight]="rowHeight"
+      [rowHeight]="rowHeight()"
       [rowCount]="rowCount"
       [offset]="offset"
       [trackByProp]="trackByProp()"
@@ -63,15 +63,15 @@
       [summaryHeight]="summaryHeight()"
       [summaryPosition]="summaryPosition()"
       [verticalScrollVisible]="verticalScrollVisible"
-      [ariaRowCheckboxMessage]="messages.ariaRowCheckboxMessage ?? 'Select row'"
+      [ariaRowCheckboxMessage]="messages().ariaRowCheckboxMessage ?? 'Select row'"
       [ariaGroupHeaderCheckboxMessage]="
-        messages.ariaGroupHeaderCheckboxMessage ?? 'Select row group'
+        messages().ariaGroupHeaderCheckboxMessage ?? 'Select row group'
       "
       [disableRowCheck]="disableRowCheck()"
       [rowDraggable]="rowDraggable()"
       [rowDragEvents]="rowDragEvents"
       [rowDefTemplate]="rowDefTemplate"
-      [cssClasses]="cssClasses"
+      [cssClasses]="cssClasses()"
       (page)="onBodyPage($event)"
       (activate)="activate.emit($event)"
       (rowContextmenu)="onRowContextmenu($event)"
@@ -87,27 +87,27 @@
           <div
             role="cell"
             class="empty-row"
-            [innerHTML]="messages.emptyMessage ?? 'No data to display'"
+            [innerHTML]="messages().emptyMessage ?? 'No data to display'"
           ></div>
         </div>
       </ng-content>
     </datatable-body>
   </div>
-  @if (footerHeight) {
+  @if (footerHeight()) {
     <datatable-footer
       [rowCount]="groupedRows !== undefined ? _internalRows.length : rowCount"
       [groupCount]="groupedRows !== undefined ? rowCount : undefined"
       [pageSize]="pageSize"
       [offset]="offset"
-      [footerHeight]="footerHeight"
+      [footerHeight]="footerHeight()"
       [footerTemplate]="footer"
-      [totalMessage]="messages.totalMessage ?? 'total'"
-      [pagerLeftArrowIcon]="cssClasses.pagerLeftArrow"
-      [pagerRightArrowIcon]="cssClasses.pagerRightArrow"
-      [pagerPreviousIcon]="cssClasses.pagerPrevious"
+      [totalMessage]="messages().totalMessage ?? 'total'"
+      [pagerLeftArrowIcon]="cssClasses().pagerLeftArrow"
+      [pagerRightArrowIcon]="cssClasses().pagerRightArrow"
+      [pagerPreviousIcon]="cssClasses().pagerPrevious"
       [selectedCount]="selected.length"
-      [selectedMessage]="!!selectionType() && (messages.selectedMessage ?? 'selected')"
-      [pagerNextIcon]="cssClasses.pagerNext"
+      [selectedMessage]="!!selectionType() && (messages().selectedMessage ?? 'selected')"
+      [pagerNextIcon]="cssClasses().pagerNext"
       (page)="onFooterPage($event)"
     />
   }

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -219,7 +219,9 @@ export class DatatableComponent<TRow extends Row = any>
    * The row height; which is necessary
    * to calculate the height for the lazy rendering.
    */
-  @Input() rowHeight: number | 'auto' | ((row: TRow) => number) = 30;
+  readonly rowHeight = input<number | 'auto' | ((row: TRow) => number)>(
+    this.configuration?.rowHeight ?? 30
+  );
 
   /**
    * Type of column width distribution formula.
@@ -231,13 +233,15 @@ export class DatatableComponent<TRow extends Row = any>
    * The minimum header height in pixels.
    * Pass a falsey for no header
    */
-  @Input() headerHeight: number | 'auto' = 30;
+  readonly headerHeight = input<number | 'auto'>(this.configuration?.headerHeight ?? 30);
 
   /**
    * The minimum footer height in pixels.
    * Pass falsey for no footer
    */
-  @Input({ transform: numberAttribute }) footerHeight = 0;
+  readonly footerHeight = input(this.configuration?.footerHeight ?? 0, {
+    transform: numberAttribute
+  });
 
   /**
    * If the table should use external paging
@@ -359,7 +363,9 @@ export class DatatableComponent<TRow extends Row = any>
   /**
    * Css class overrides
    */
-  @Input() cssClasses: Partial<Required<NgxDatatableConfig>['cssClasses']> = {};
+  readonly cssClasses = input<Partial<Required<NgxDatatableConfig>['cssClasses']>>(
+    this.configuration?.cssClasses ? { ...this.configuration.cssClasses } : {}
+  );
 
   /**
    * Message overrides for localization
@@ -381,7 +387,9 @@ export class DatatableComponent<TRow extends Row = any>
    * }
    * ```
    */
-  @Input() messages: Partial<Required<NgxDatatableConfig>['messages']> = {};
+  readonly messages = input<Partial<Required<NgxDatatableConfig>['messages']>>(
+    this.configuration?.messages ? { ...this.configuration.messages } : {}
+  );
 
   /**
    * A function which is called with the row and should return either:
@@ -541,7 +549,7 @@ export class DatatableComponent<TRow extends Row = any>
    */
   @HostBinding('class.fixed-header')
   get isFixedHeader(): boolean {
-    const headerHeight: number | string = this.headerHeight;
+    const headerHeight: number | string = this.headerHeight();
     return typeof headerHeight === 'string' ? (headerHeight as string) !== 'auto' : true;
   }
 
@@ -551,7 +559,7 @@ export class DatatableComponent<TRow extends Row = any>
    */
   @HostBinding('class.fixed-row')
   get isFixedRow(): boolean {
-    return this.rowHeight !== 'auto';
+    return this.rowHeight() !== 'auto';
   }
 
   /**
@@ -712,7 +720,7 @@ export class DatatableComponent<TRow extends Row = any>
   _columns!: TableColumn[];
   _subscriptions: Subscription[] = [];
   _ghostLoadingIndicator = false;
-  _defaultColumnWidth?: number;
+  _defaultColumnWidth = this.configuration?.defaultColumnWidth ?? 150;
   /**
    * To have this available for all components.
    * The Footer itself is not available in the injection context in templates,
@@ -726,22 +734,6 @@ export class DatatableComponent<TRow extends Row = any>
   // this will be set to true once rows are available and rendered on UI
   private readonly _rowInitDone = signal(false);
 
-  constructor() {
-    // apply global settings from Module.forRoot
-    if (this.configuration) {
-      if (this.configuration.messages) {
-        this.messages = { ...this.configuration.messages };
-      }
-      if (this.configuration.cssClasses) {
-        this.cssClasses = { ...this.configuration.cssClasses };
-      }
-      this.headerHeight = this.configuration.headerHeight ?? this.headerHeight;
-      this.footerHeight = this.configuration.footerHeight ?? this.footerHeight;
-      this.rowHeight = this.configuration.rowHeight ?? this.rowHeight;
-      this._defaultColumnWidth = this.configuration.defaultColumnWidth ?? 150;
-    }
-  }
-
   /**
    * Lifecycle hook that is called after data-bound
    * properties of a directive are initialized.
@@ -984,8 +976,8 @@ export class DatatableComponent<TRow extends Row = any>
       if (this.headerElement) {
         height = height - this.headerElement.nativeElement.getBoundingClientRect().height;
       }
-      if (this.footerHeight) {
-        height = height - this.footerHeight;
+      if (this.footerHeight()) {
+        height = height - this.footerHeight();
       }
       this.bodyHeight = height;
     }
@@ -1064,7 +1056,7 @@ export class DatatableComponent<TRow extends Row = any>
     // This is because an expanded row is still considered to be a child of
     // the original row.  Hence calculation would use rowHeight only.
     if (this.scrollbarV() && this.virtualization()) {
-      const size = Math.ceil(this.bodyHeight / (this.rowHeight as number));
+      const size = Math.ceil(this.bodyHeight / (this.rowHeight() as number));
       return Math.max(size, 0);
     }
 

projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, TemplateRef, viewChild, ViewChild } from '@angular/core';
+import { Component, DebugElement, signal, TemplateRef, viewChild, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -183,6 +183,7 @@ class TestFixtureComponent {
   footerTemplate?: { template: TemplateRef<any> };
   selectedCount = 0;
   selectedMessage?: string;
+  readonly messages = signal({});
 
   /**
    * establishes a reference to a test template that can

projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts

@@ -8,9 +8,9 @@ import {
 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { DatatableComponent } from '@siemens/ngx-datatable';
 
 import { DATATABLE_COMPONENT_TOKEN } from '../../utils/table-token';
-import type { DatatableComponent } from '../datatable.component';
 import { DatatablePagerComponent } from './pager.component';
 import { PagerHarness } from './testing/pager.harness';
 
@@ -28,9 +28,9 @@ interface MockFooter {
 
 describe('DataTablePagerComponent', () => {
   let fixture: ComponentFixture<DatatablePagerComponent>;
-  let pager: DatatablePagerComponent;
   let harness: PagerHarness;
   let footer: MockFooter;
+  let messages: WritableSignal<ReturnType<DatatableComponent['messages']>>;
 
   beforeEach(async () => {
     footer = {
@@ -44,19 +44,19 @@ describe('DataTablePagerComponent', () => {
       pagerPreviousIcon: signal(''),
       page: { emit: ({ page }: { page: number }) => footer.curPage.set(page) }
     };
+    messages = signal({});
     TestBed.overrideComponent(DatatablePagerComponent, {
       set: {
         changeDetection: ChangeDetectionStrategy.Default,
         providers: [
           {
             provide: DATATABLE_COMPONENT_TOKEN,
-            useValue: { _footerComponent: signal(footer) }
+            useValue: { _footerComponent: signal(footer), messages }
           }
         ]
       }
     });
     fixture = TestBed.createComponent(DatatablePagerComponent);
-    pager = fixture.componentInstance;
     harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, PagerHarness);
   });
 
@@ -273,8 +273,8 @@ describe('DataTablePagerComponent', () => {
     };
 
     describe('takes messages-overrides from table', () => {
-      const setMessages = (messages: DatatableComponent['messages']) => {
-        (pager as any).datatable = { messages };
+      const setMessages = (overrides: ReturnType<DatatableComponent['messages']>) => {
+        messages.set(overrides);
         // do a change detection on the real changeDetectionRef
         fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
       };

projects/ngx-datatable/src/lib/components/footer/pager.component.ts

@@ -106,8 +106,8 @@ export class DatatablePagerComponent {
   // Ideally we can one day fetch those attributes from a global state, but for now this is fine.
   private datatable = inject(DATATABLE_COMPONENT_TOKEN);
 
-  protected get messages(): DatatableComponent['messages'] {
-    return this.datatable?.messages ?? {};
+  protected get messages(): ReturnType<DatatableComponent['messages']> {
+    return this.datatable?.messages() ?? {};
   }
 
   protected readonly page = computed(() => this.datatable._footerComponent()!.curPage());