Skip to content

Commit 4bfbf62

Browse files
spike-rabbitfh1ch
authored andcommitted
refactor: migrate simpl input to signal
This migrates all inputs to signals that are not reassigned and not getter / setter. The breaking change note also refers to future breaking changes, so we do not repeat this for every single commit: BREAKING CHANGE: Migration to Angular signal inputs/outputs. All components now use Angular’s `input()`, `model()`, and `output()` functions instead of the `@Input`/`@Output` decorators. Consider the following implications for your code: Template bindings: No changes required! Continue using [inputName] and (outputName) in templates as before. Programmatic access: Use template binding whenever possible. If not possible, understand that setting input values programmatically is only possible for model() inputs. Reading input values programmatically also requires adjustments for the signal API: ```ts class Component { @ViewChild(DatatableComponent) private datatableComponent!: DatatableComponent; myFunction(): void { // Before const value = this.datatableComponent.rows; // After const value = this.datatableComponent.rows(); } } ``` If programmatically subscribing to outputs is needed, read the following guide: https://angular.dev/guide/components/outputs#subscribing-to-outputs-programmatically
1 parent babdc44 commit 4bfbf62

File tree

2 files changed

+93
-92
lines changed

2 files changed

+93
-92
lines changed

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
<datatable-header
55
role="rowgroup"
66
[sorts]="sorts"
7-
[sortType]="sortType"
8-
[scrollbarH]="scrollbarH"
7+
[sortType]="sortType()"
8+
[scrollbarH]="scrollbarH()"
99
[innerWidth]="_innerWidth"
1010
[offsetX]="_offsetX"
1111
[dealsWithGroup]="groupedRows !== undefined"
1212
[columns]="_internalColumns"
1313
[headerHeight]="headerHeight"
14-
[reorderable]="reorderable"
15-
[targetMarkerTemplate]="targetMarkerTemplate"
14+
[reorderable]="reorderable()"
15+
[targetMarkerTemplate]="targetMarkerTemplate()"
1616
[sortAscendingIcon]="cssClasses.sortAscending"
1717
[sortDescendingIcon]="cssClasses.sortDescending"
1818
[sortUnsetIcon]="cssClasses.sortUnset"
1919
[allRowsSelected]="allRowsSelected"
20-
[selectionType]="selectionType"
20+
[selectionType]="selectionType()"
2121
[verticalScrollVisible]="verticalScrollVisible"
22-
[enableClearingSortState]="enableClearingSortState"
22+
[enableClearingSortState]="enableClearingSortState()"
2323
[ariaHeaderCheckboxMessage]="messages.ariaHeaderCheckboxMessage ?? 'Select all rows'"
2424
(sort)="onColumnSort($event)"
2525
(resize)="onColumnResize($event)"
@@ -35,17 +35,17 @@
3535
[groupRowsBy]="groupRowsBy"
3636
[groupedRows]="groupedRows"
3737
[rows]="_internalRows"
38-
[groupExpansionDefault]="groupExpansionDefault"
39-
[scrollbarV]="scrollbarV"
40-
[scrollbarH]="scrollbarH"
41-
[virtualization]="virtualization"
42-
[loadingIndicator]="loadingIndicator"
38+
[groupExpansionDefault]="groupExpansionDefault()"
39+
[scrollbarV]="scrollbarV()"
40+
[scrollbarH]="scrollbarH()"
41+
[virtualization]="virtualization()"
42+
[loadingIndicator]="loadingIndicator()"
4343
[ghostLoadingIndicator]="ghostLoadingIndicator"
44-
[externalPaging]="externalPaging"
44+
[externalPaging]="externalPaging()"
4545
[rowHeight]="rowHeight"
4646
[rowCount]="rowCount"
4747
[offset]="offset"
48-
[trackByProp]="trackByProp"
48+
[trackByProp]="trackByProp()"
4949
[columns]="_internalColumns"
5050
[pageSize]="pageSize"
5151
[offsetX]="_offsetX"
@@ -54,21 +54,21 @@
5454
[selected]="selected"
5555
[innerWidth]="_innerWidth"
5656
[bodyHeight]="bodyHeight"
57-
[selectionType]="selectionType"
57+
[selectionType]="selectionType()"
5858
[rowIdentity]="rowIdentity"
59-
[rowClass]="rowClass"
60-
[selectCheck]="selectCheck"
61-
[displayCheck]="displayCheck"
62-
[summaryRow]="summaryRow"
63-
[summaryHeight]="summaryHeight"
64-
[summaryPosition]="summaryPosition"
59+
[rowClass]="rowClass()"
60+
[selectCheck]="selectCheck()"
61+
[displayCheck]="displayCheck()"
62+
[summaryRow]="summaryRow()"
63+
[summaryHeight]="summaryHeight()"
64+
[summaryPosition]="summaryPosition()"
6565
[verticalScrollVisible]="verticalScrollVisible"
6666
[ariaRowCheckboxMessage]="messages.ariaRowCheckboxMessage ?? 'Select row'"
6767
[ariaGroupHeaderCheckboxMessage]="
6868
messages.ariaGroupHeaderCheckboxMessage ?? 'Select row group'
6969
"
70-
[disableRowCheck]="disableRowCheck"
71-
[rowDraggable]="rowDraggable"
70+
[disableRowCheck]="disableRowCheck()"
71+
[rowDraggable]="rowDraggable()"
7272
[rowDragEvents]="rowDragEvents"
7373
[rowDefTemplate]="rowDefTemplate"
7474
[cssClasses]="cssClasses"
@@ -106,7 +106,7 @@
106106
[pagerRightArrowIcon]="cssClasses.pagerRightArrow"
107107
[pagerPreviousIcon]="cssClasses.pagerPrevious"
108108
[selectedCount]="selected.length"
109-
[selectedMessage]="!!selectionType && (messages.selectedMessage ?? 'selected')"
109+
[selectedMessage]="!!selectionType() && (messages.selectedMessage ?? 'selected')"
110110
[pagerNextIcon]="cssClasses.pagerNext"
111111
(page)="onFooterPage($event)"
112112
/>

0 commit comments

Comments
 (0)