-
Notifications
You must be signed in to change notification settings - Fork 28
refactor: migrate simpl input to signal #493
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
b7a38ca to
9ac8bb1
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR migrates several @Input() decorators to Angular's modern input() signal API in the datatable component, converting approximately 30 input properties from traditional decorator-based inputs to signal-based inputs. This migration supports Angular's new signal-based reactivity system.
Key changes:
- Converted multiple
@Input()properties toreadonlysignal inputs using theinput()function - Updated all usages of these properties throughout the component to call them as functions (e.g.,
this.scrollbarV()instead ofthis.scrollbarV) - Updated template bindings to call signal inputs as functions
- Fixed a spelling error in a comment from "rowDraggble" to "rowDraggable"
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| projects/ngx-datatable/src/lib/components/datatable.component.ts | Converted 30+ properties from @Input() decorators to signal-based input() calls and updated all references to use function call syntax |
| projects/ngx-datatable/src/lib/components/datatable.component.html | Updated template bindings to call signal inputs as functions by adding () to property references |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
projects/ngx-datatable/src/lib/components/datatable.component.ts
Outdated
Show resolved
Hide resolved
fh1ch
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spike-rabbit nice one, thanks a lot 🙇
Just one finding, otherwise this one is good to go.
projects/ngx-datatable/src/lib/components/datatable.component.ts
Outdated
Show resolved
Hide resolved
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
9ac8bb1 to
baa1bab
Compare
fh1ch
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
What kind of change does this PR introduce? (check one with "x")
What is the current behavior? (You can also link to an open issue here)
Only decorator based input / outputs on public APIs.
What is the new behavior?
All inputs on the
DatatableComponentare now signals that are not reassigned and not getter / setter.Does this PR introduce a breaking change? (check one with "x")
If this PR contains a breaking change, please describe the impact and migration path for existing applications:
Be aware that this note also covers future changes. It is just announced once here to avoid overloading the changelog.
Migration to Angular signal inputs/outputs.
All components now use Angular’s
input(),model(), andoutput()functions instead of the@Input/@Outputdecorators. 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:
If programmatically subscribing to outputs is needed, read the following guide: https://angular.dev/guide/components/outputs#subscribing-to-outputs-programmatically
Other information:
We cannot do a release until the migration is completed.