Migrate Angular Decorators to Signals with Ease 🚀

With Angular v19, migrating from traditional decorators to the new Signals API has never been simpler! 🚀 Angular introduces dedicated migration commands that help you transition @Input, @Output, and @ViewChild decorators to Signals, bringing reactive and performance-enhanced features to your applications.

Migration Commands

Individual Commands for Specific Decorators

• Migrate @Input to Signals:

ng generate @angular/core:signal-input-migration

• Migrate @Output to Signals:

ng generate @angular/core:output-migration

• Migrate @ViewChild and other queries to Signals:

ng generate @angular/core:signal-queries-migration

Combined Command for All Decorators

To migrate all your decorators in one go, use this command:

ng generate @angular/core:signals

Why Use Signals?

• Improved Reactivity: Signals integrate seamlessly with Angular’s reactivity model, reducing boilerplate code.
• Enhanced Performance: Signals minimize change detection overhead.
• Simplified State Management: Signals offer a consistent, reactive approach across your components.

Example: Migrating @Input

Before:

@Input() title!: string;

After Migration:

const title = signal<string>('');

Share Your Experience!

Are you exploring the new Signals APIs? Let us know your favorite Signal use cases in the comments! 💬