Angular 19: linkedSignal

In Angular 19, the linkedSignal feature introduces a reactive variable that remains synchronized with computed logic. This is a powerful addition that enhances reactivity and simplifies your codebase.

How linkedSignal Works

The linkedSignal works by deriving its value from a provided computation function. Here’s how it operates:

1. Computation Function: You supply a function to linkedSignal, and its result becomes the linkedSignal's value.
2. Auto-Updates: The linkedSignal automatically updates whenever the inputs to the computation change.
3. Manual Updates: You can also manually change the value of a linkedSignal.

---

Example Usage

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);

Step-by-Step:

1. Initial Value:

console.log(selectedOption()); // 'Ground'

selectedOption starts with 'Ground' because it links to the first item in shippingOptions.

1. Manual Update:

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

You manually set selectedOption to 'Sea', which is the third option in the array.

1. Auto-Update on Dependency Change:

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

When shippingOptions changes, the linkedSignal recomputes. Now, it reflects the new first option: 'Email'.

Here’s an example of using a linkedSignal with a custom computation function
≈
Suppose you want to manage temperature in both Celsius and Fahrenheit. A linkedSignal can be used to keep Fahrenheit linked to Celsius through a custom function.

const celsius = signal(25); // Base signal for temperature in Celsius
const fahrenheit = linkedSignal(() => celsius() * 9/5 + 32); 

// Compute Fahrenheit from Celsius
console.log(fahrenheit()); // 77 (25°C in Fahrenheit)

// Change the Celsius value
celsius.set(30);
console.log(fahrenheit()); // 86 (30°C in Fahrenheit)

// Manually update Fahrenheit (breaks auto-link temporarily)
fahrenheit.set(100);
console.log(fahrenheit()); // 100
console.log(celsius()); // Still 30, as Fahrenheit is overridden

// Change Celsius again to reset linkage
celsius.set(0);
console.log(fahrenheit()); // 32 (0°C in Fahrenheit)

Why Use It?

Keeps State in Sync: Ensures your linkedSignal always matches the latest state of its computation.
Convenient: You don’t need to manually update the linkedSignal when its dependencies change—it updates automatically.
Flexible: You can still manually override its value when needed.

Key Takeaway:

A linkedSignal ties its value to some logic, so it automatically stays up-to-date when the logic changes. It’s great for scenarios where one state depends on another.

More Angular related topics:

Kristiyan Velkov
JavaScript | TypeScript | React.js | Angular | Next.js | Vue.js | Analog | HTML | CSS | SASS | Tailwind CSS | Bootstrap…

𝐒𝐔𝐁𝐒𝐂𝐑𝐈𝐁𝐄:
🔗 𝐌𝐞𝐝𝐢𝐮𝐦: https://lnkd.in/dSqYhK9a
🔗 𝐒𝐮𝐛𝐬𝐭𝐚𝐜𝐤: https://lnkd.in/d8z_8pQS

© 2025 Kristiyan Velkov. All rights reserved.