Keeping the reactive state in sync across complex Angular apps often leads to extra code and maintenance. Angular 19 introduces linkedSignal, a new experimental feature that simplifies this by linking values to their source signals.
In this article, we will examine the problem that linkedSignal solves, its working mechanism, and the key benefits it brings to cleaner and more efficient state management.
Challenge
Managing the dependencies and changes between reactive signals in Angular can be a challenging task in complex applications. Although the existing reactive primitives, such as signal and computed, offer robust solutions for handling reactivity, they lack mechanisms for directly coupling reactive state changes with derived calculations that automatically reset when their source changes. Developers are often required to add extra boilerplate code to achieve this functionality, which increases the code’s complexity and reduces its maintainability.
Solution
Angular 19 introduces linkedSignal, a new experimental reactive primitive designed to fill this gap. linkedSignal is a writable signal that links its value to a source signal and recalculates itself based on a given computation function whenever the source signal changes.
Key features of linkedSignal:
- When the source signal changes, the value of linkedSignal automatically resets.
- The value of linkedSignal can be set manually using the set method, but it will revert to the computed value when the source signal updates.
- The computation logic is located inside linkedSignal, keeping dependencies clear and declarative while preserving all reactive programming features.
As shown in the example below, the set method of favoriteColorId allows the user to specify a chosen color ID (see onFavoriteColorChange). When the available colors are updated (see changeColorOptions), the value of favoriteColorId is recalculated. If the selected color exists in the new list, the signal value remains unchanged; otherwise, it defaults to null.
protected readonly colorOptions = signal<Color[]>([
{ id: 1, name: 'Red',},
{ id: 2, name: 'Green'},
{ id: 3, name: 'Blue'}
]);
protected favoriteColorId = linkedSignal<Color[], number | null>({
source: this.colorOptions,
computation: (source, previous) => {
if(previous?.value) {
return source.some(color => color.id === previous.value) ? previous.value : null;
}
return null;
}
});
protected onFavoriteColorChange(colorId: number): void {
this.favoriteColorId.set(colorId);
}
protected changeColorOptions(): void {
this.colorOptions.set([
{ id: 1, name: 'Red' },
{ id: 4, name: 'Yellow' },
{ id: 5, name: 'Orange' }
])
}}Benefits
linkedSignal makes state management easier by linking updates directly to source signals, ensuring that dependencies remain up-to-date without explicit subscriptions and/or side effects. With the flexibility to override values as needed, it reduces boilerplate, improves maintainability, and optimizes responsiveness.
If you want to learn more about Angular’s latest features, like linkedSignal, and how they can improve your development workflow, download our free ebook full of practical insights and examples.
2 min
