April 15, 2025
Angular Signals Part 6 – What are Linked Signals?
Klicke hier für die deutsche Version des Blog-Posts.
Extend the functionality of your Signals with Linked Signals
A new feature has now been introduced with Angular 19: Linked Signals. If you’re wondering: What are Linked Signals? And what are the benefits of using them? You’ve come to the right place. We’ll explain how Linked Signals work and how you can use them to extend the functionality of your Signals. If you want a quick refresher on Angular Signals, we have another article that’s just right for you. In our Angular Guide, we give you an overview of all the articles in our Angular Signals series, starting with: What are Signals actually and what benefits do they bring?
So what are Linked Signals: They are basically similar to the readonly signals created with computed(), with one difference – Linked Signals are writeable signals, which means they can be changed manually, like signal(). This means that their value does not depend exclusively on the signal in the callback function, but can also be specifically adjusted. In this blog article, we will look at how to create Linked Signals and what problem they solve.
If you want to learn more about Signal Inputs and Angular in detail, visit one of our Angular courses:
- Angular Basic Training: https://www.thecodecampus.de/schulungen/angular
- Advanced Training: https://www.thecodecampus.de/schulungen/angular-advanced
The problem with readonly signals
Before we look at Linked Signals, let’s first look at the underlying problem. To do this, we will create a small example and apply signals as we have already learned about them.
Our scenario is about restaurant information with two central functions:
- The user is automatically shown the details of the top-rated restaurant.
- The user can manually select a restaurant from a list.
What we know about Signals so far
Let’s take care of the first requirement first. We create a signal() called restaurants, which contains a list of restaurant objects. Then a computed() signal called selectedRestaurant is created, which returns the restaurant with the highest score from the restaurants list. As a reminder, if the restaurants signal is changed by set() or update(), the callback function of the dependent signal (selectedRestaurant) is automatically executed and the highest rated restaurant is determined.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { Component, computed, Signal, signal } from '@angular/core'; @Component({ ... template: ` <h3>All restaurants:</h3> @for (restaurant of this.restaurants(); track restaurant) { <li> Name: {{restaurant.name}} Rating: {{restaurant.rating}} </li> } <br> <h3>Restaurant details:</h3> <div>Name: {{selectedRestaurant().name}} Rating: {{selectedRestaurant().rating}}</div> <div>Address: {{selectedRestaurant().address}}</div> `, }) export class RestaurantSignalsComponent { // Create Restaurant Signal restaurants: Signal<Restaurant[]> = signal([ { name: 'Pizza Paradiso', rating: 2.0, address: '123 Pizza Street, Rome' }, { name: 'Sushi World', rating: 4.9, address: '456 Sushi Lane, Tokyo' }, { name: 'Pasta Palace', rating: 3.0, address: '789 Pasta Avenue, Florence' }, ]); // Create Computed Signal selectedRestaurant = computed(() => { return this.restaurants().sort((a, b) => b.rating - a.rating)[0]; }); } |
We would now like to implement the second requirement so that the user can select a restaurant manually via a click event, for example, instead of just being shown the top-rated restaurant automatically. An obvious solution would be to change selectedRestaurant with set() or update(). However, this is not possible because a computed() signal, as mentioned at the beginning, is readonly and only updates itself when its dependent signals change. Therefore, the following code would not work as desired.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
... @Component({...}) export class RestaurantSignalsComponent { ... // Create Computed Signal selectedRestaurant = computed(() => { return this.restaurants().sort((a, b) => b.rating - a.rating)[0]; }); // Computed Signal: Will not work selectRestaurantOnList(restaurant: any){ this.selectedRestaurant.set(restaurant) // X ERROR } } |
To combine computed() with a manual selection, we need an additional writeable signal that stores the value selected by the user. Since computed() is readonly, the value cannot be set directly. Instead, another signal() or an effect() can be used that reacts to changes in the restaurants signal and ensures that the selected restaurant is only set automatically if the user has not yet made their own selection. This imperative approach is cumbersome as we need to explicitly control when and how the selected restaurant is updated instead of solving this purely declaratively. This is exactly where Linked Signals offer a much more elegant alternative.
The solution: Create Linked Signals
We would now like to implement our example with Linked Signals and show how much easier it is to implement the requirements. A linkedSignal() combines computed() and signal() by automatically updating calculated values while allowing them to be overwritten manually. This means that they are writeable, so that the user can adjust the value of selectedRestaurant via set() or update() as desired.
A Linked Signal can be easily created with the linkedSignal() function. Selected restaurants are set using the set() function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
_import { linkedSignal, signal } from '@angular/core'; @Component({...}) export class RestaurantLinkedSignalsComponent { restaurants = signal([ { name: 'Pizza Paradiso', rating: 2.0, address: '123 Pizza Street, Rome'}, { name: 'Sushi World', rating: 4.9, address: '456 Sushi Lane, Tokyo'}, { name: 'Pasta Palace',rating: 3.0, address: '789 Pasta Avenue, Florence'}, ]); // Create Linked Signal selectedRestaurant = linkedSignal(() => { return this.restaurants().sort((a, b) => b.rating - a.rating)[0]; }) // Manual Selection selectRestaurantOnList(restaurant: Restaurant) { this.selectedRestaurant.set(restaurant); } } |
Alternative creation
An object-based approach can also be used for generation. In this case, the source and the computation are specified explicitly. This syntax is more flexible and is suitable for complex use cases.
|
1 2 3 4 5 6 7 |
... selectedRestaurant = linkedSignal({ source: this.restaurants, computation: () => { return this.restaurants().sort((a, b) => b.rating - a.rating)[0]; } }); |
Conclusion
Linked Signals close a gap between readonly computed() signals and normal writeable signal() signals. They allow calculated values to be updated automatically, while at the same time they can be overwritten manually.
signal(): A simple signal that stores a value and can be both read and modified (writetable).computed(): A readable signal that is automatically recalculated when dependent signals change, but cannot be changed directly (readonly).linkedSignal(): A signal that is automatically recalculated when dependent signals change, and which can also be changed manually (writeable).
Experience is the best teacher: Hands-on with Linked Signals
Are you ready to put theory into practice? In this interactive StackBlitz example, you will find the sample application presented, which takes up the basic concepts of Linked Signals and includes the examples and functions presented.
What comes next?
In addition to Linked Signals, Angular 19 also introduced the resource experiment in order to seamlessly integrate asynchronous data into signal-based applications. We will take a closer look at this topic in the next article.
Cornelius Rost
Developer at 
I am Cornelius, a working student in web development at W11K, where I work on web projects and develop practical solutions. I am currently studying for a Master's degree at the University of Stuttgart and am deepening my knowledge of software engineering.