Angular Signals Part 4 – Migrate easily to Signals

Klicke hier für die deutsche Version des Blog-Posts.

Make your life easier and migrate to Signals with Angular 17

In the first three parts of this series Angular Signals Part 1 – How-to Guide on Angular Signals, Angular Signals Part 2 – How to combine Angular Signals and RxJS and Angular Signals Part 3 – What are the advantages of Signal Inputs we looked at what Signals are, how to combine them with RxJS and what the advantages of Signal Inputs are. This time we want to show you how old Angular code can be easily migrated to Signals with the help of ngxtension so that you can take advantage of Signals as quickly as possible.

In recent years, Angular has continued to evolve to provide developers with more powerful and efficient tools. An important step in this evolution is the introduction of Angular Signals in Angular 17, which allows developers to manage reactive state in a more intuitive and efficient way. However, the question for many is how to seamlessly migrate your legacy Angular code to Angular Signals without disrupting the development flow.

This is where extensions come into play that simplify and accelerate this migration. In this article, we will introduce you to ngxtension and two extensions that helped us a lot during the migration and with which we were able to migrate to the new signal-based paradigm in an efficient and structured manner.

If you would like to learn more about using Signals and Angular in detail, why not attend one of our Angular courses?

• Angular Basic Training: https://www.thecodecampus.de/schulungen/angular
• Advanced Training: https://www.thecodecampus.de/schulungen/angular-advanced

Ngxtension

Ngxtension is a framework and library for Angular that aims to simplify the development of Angular applications. It offers various extensions, utility functions and tools that make it easier to work with Angular components, services and modules. To use ngxtension in your projects, you can add it e.g. via the Angular CLI or install it with npm.

Command for Angular CLI:

npm command:

Now that ngxtension is installed, let’s take a closer look at the migration of inputs and outputs. Manually migrating inputs and outputs to the new input() and output() functions can be a tedious and error-prone task. Fortunately, this process is almost completely automated through the use of ngxtension.

Use ngxtension to migrate @Input to Signal Inputs

With Angular v17.1, Signal Inputs were released and have since allowed us developers to use more declarative and reactive code patterns. For this reason, ngxtensions publishes schematics that take over the code migration for us. Among other things

• the same names are retained for the inputs.
• the same types and default values are retained.
• the component templates are updated to use the new signal inputs.

You can also find more information in the documentation on Signal Inputs Migration from ngxtension.

With the following command you can migrate your old @Inputs() to Signal Inputs:

What exactly does the Signal Inputs Migration do?

Here are some examples to give you an overview and better understanding of the differences before and after the migration of the inputs with ngxtension. In addition to a normal input, we have also listed an input with an alias and a default, i.e. an initial value.

Normal input:

Before:

After:

Input with alias:

Before:

After:

Input with default value:

Before:

After:

Use ngxtension to migrate @Output

The new output() function was introduced in Angular v17.3. Similar to the input() function for generating signal inputs, the output() function can be used to generate outputs without a decorator. Ngxtension has published special schematics that automate the migration of the code.

When the schema is executed, it searches for all decorators that are outputs and converts them into function-based outputs. This time as well

• the same name is retained for the outputs.
• the same types are retained.
• the same alias is kept if it is available.

You can also find more information in the documentation on the New output() migration of ngxtension.

Use the following command to start the migration of the @Output functions:

What exactly does the output() migration do?

Here, too, we have two examples to give you an overview and a better understanding of the differences before and after migration with ngxtension.

Normal output:

Before:

After:

Output with alias:

Before:

After:

What comes next?

Now that our code is up to date, we want to tackle a somewhat bigger task in the next article in this series. We will show you step by step how to refactor a custom directive to signals, explain which points you need to pay particular attention to and what advantages this offers.