This content originally appeared on Angular Blog - Medium and was authored by Angular
Authors: Paul Gschwendtner Mark Thompson
Signal inputs have graduated to production-ready and the Angular team is excited to be providing new migrations to help you and your teams update your decorator-based inputs to the new signal API.
Find more information in the official documentation: https://angular.dev/reference/migrations/signal-inputs
Why migrate?
Signal inputs provide fantastic updates to the input functionality while maintaining feature parity with decorator-based inputs. One of the primary reasons teams will want to update is type-safety that enables developers to remove brittle code patterns like non-null assertions in code. There’s also a great new pattern that makes input monitoring much simpler.
Consider the example below, where MyComponent is using the ngOnChanges lifecycle hook to track update to the input:
export class MyComponent implements OnChanges {
@Input() myField: string = 'Initial';
result = expensiveResultUsingInput(this.myField);
ngOnChanges(changes: SimpleChanges) {
if (changes['myField']) {
// re-compute some expensive result based on `this.myField`..
this.result = expensiveResultUsingInput(this.myField);
}
}
}This code can be neatly refactored using signal inputs and Angular’s computed primitive:
export class MyComponent implements OnChanges {
readonly myField = input('Initial');
readonly result = computed(() => expensiveResultUsingInput(this.myField()));
}New solutions like this will emerge throughout your project and in the ecosystem because developers are naturally empowered to use convenient signal-based APIs to write more clear and effective code.
We find that signals in general simplify the mental model of Angular developers, as it’s much easier to reason about how state is synchronized to the UI and how state is flowing.
Here’s how
Like with other migrations in the past, you can run the migration via the Angular CLI, but we are also elevating our migration efforts to be available as code refactoring actions in VSCode. Clicking the yellow light bulb reveals new suggested actions for migrating decorator-based inputs to signal-based inputs.
And when using the Angular CLI, run the following command:
ng generate @angular/core:signal-inputs
After running the migration, the tooling will not only update the @Input declarations, but also adjust references to your inputs. The migration smartly introduces variables where necessary, to reasonably integrate signals into your existing application code.
Let’s consider the following example.
Before:
@Component(…)
export class MyComp {
@Input() user?: User|undefined;
printUser() {
if (this.user) {
this.user.printDetails();
}
}
}
After:
@Component(...)
export class MyComp {
readonly user = input<User>();
printUser() {
const user = this.user();
if (user) {
user.printDetails();
}
}
}
The migration is configurable and features some options to help you choose the right strategy to migrate your code whether it be all at once or perhaps only specific paths. You can learn more in the migration documentation on blog.angular.dev.
We’re excited to continue to move Angular forward and get closer and closer to realizing our vision for a new reactivity model that enables you to deliver web apps with confidence.
Try Out the New Signal Input Migrations was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Angular
Angular | Sciencx (2025-01-10T15:14:58+00:00) Try Out the New Signal Input Migrations. Retrieved from https://www.scien.cx/2025/01/10/try-out-the-new-signal-input-migrations/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.