Angular Guide – Overview of all Signal topics and other highlights

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

Easily get an overview of all signal-related topics and other highlights in Angular

By now, our Angular Signals series has grown considerably, which is why we thought it was time to collect all the blog articles and summarize them briefly.

Like us, and now you too, our Angular training courses are always up to date. If you want to learn more about Signals and find out tips and tricks for Angular, attend one of our Angular courses:

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

Angular Signals Part 1 – How-to guide on Angular Signals

In our first article, we introduce you to Angular Signals and explain which performance problems they solve. We also look at the advantages they have as reactive primitives and how they have a positive effect on the state management of your Angular application.

Of course, we also use code examples to show you how to use signals and what the difference is between the set() and update() methods. We demonstrate the combination of several signals and how they can interact with each other using the functions computed(), effect() and untracked().

Angular Signals Part 2 – How to combine Angular Signals and RxJS

Why RxJS will not be replaced by Signals and how well the two technologies can work together is the topic of the second article. We present the strengths and weaknesses of the approaches and show you which tasks they are best suited for.
The functions toSignal() and toObservable() play an important role in the combination of Signals and RxJS.

We also explain how the toLazySignal() and connect() functions of ngxtension make working with Signals even easier.

Angular Signals Part 3 – What are the advantages of Signal Inputs?

In the third part, we will look at how you can increase the reactivity of your Angular application by switching the @Input decorator to signal inputs.
After briefly explaining the classic @Input decorator, we then introduced the signal inputs and their options required, alias and transform().

We have compared the approaches for you and summarized the advantages of the signal inputs.

Angular Signals Part 4 -Migrate easily to Signals

The previous articles have shown you the advantages of signals and how you can improve the reactivity and performance of your Angular application. In part four, we will introduce you to two extremely useful commands from ngxtension that you can use to easily migrate your code and make it signal-ready.

On the one hand, this is the command for the migration from @Input to Signal Inputs and, on the other hand, the conversion from @Output to the new output() notation.

Angular Signals Part 5 – Step by step to Signal Directives

In the current last part of the Angular Signals series, we convert a classic structure directive with observables and ngOnChanges() hook to a signal-based approach. We go step by step and explain what happens.
In particular, we will discuss the functions inject(), toSignal() and effect() and replace the @Input() decorator and the ngOnChanges() hook.

What are the next topics?

With Angular v19, there are already new features for Angular Signals and other exciting highlights, such as the Resource API and Incremental Hydration. So you can look forward to many interesting articles! Of course, we will also update this post so that you can always get a quick overview.