diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html
index 59dc33003..a36534cdf 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.html
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.html
@@ -1,6 +1,6 @@
- @if (headerHeight) {
+ @if (headerHeight()) {
- @if (footerHeight) {
+ @if (footerHeight()) {
}
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
index 394fe3d7a..a80ca003b 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.ts
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -219,7 +219,9 @@ export class DatatableComponent
* 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)>(
+ this.configuration?.rowHeight ?? 30
+ );
/**
* Type of column width distribution formula.
@@ -231,13 +233,15 @@ export class DatatableComponent
* The minimum header height in pixels.
* Pass a falsey for no header
*/
- @Input() headerHeight: number | 'auto' = 30;
+ readonly headerHeight = input(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
/**
* Css class overrides
*/
- @Input() cssClasses: Partial['cssClasses']> = {};
+ readonly cssClasses = input['cssClasses']>>(
+ this.configuration?.cssClasses ?? {}
+ );
/**
* Message overrides for localization
@@ -381,7 +387,9 @@ export class DatatableComponent
* }
* ```
*/
- @Input() messages: Partial['messages']> = {};
+ readonly messages = input['messages']>>(
+ this.configuration?.messages ?? {}
+ );
/**
* A function which is called with the row and should return either:
@@ -541,7 +549,7 @@ export class DatatableComponent
*/
@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
*/
@HostBinding('class.fixed-row')
get isFixedRow(): boolean {
- return this.rowHeight !== 'auto';
+ return this.rowHeight() !== 'auto';
}
/**
@@ -712,7 +720,7 @@ export class DatatableComponent
_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
// 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
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
// 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);
}
diff --git a/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts b/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts
index 1903f31a6..2b9b21089 100644
--- a/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts
+++ b/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 };
selectedCount = 0;
selectedMessage?: string;
+ readonly messages = signal({});
/**
* establishes a reference to a test template that can
diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts
index 1e948cec0..1565af4e7 100644
--- a/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts
+++ b/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;
- let pager: DatatablePagerComponent;
let harness: PagerHarness;
let footer: MockFooter;
+ let messages: WritableSignal>;
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) => {
+ messages.set(overrides);
// do a change detection on the real changeDetectionRef
fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
};
diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts
index 086da831c..4260eeac4 100644
--- a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts
+++ b/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 {
+ return this.datatable?.messages() ?? {};
}
protected readonly page = computed(() => this.datatable._footerComponent()!.curPage());