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

HowlinkedSignal Works

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

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

Example Usage

constshippingOptions=signal(['Ground','Air','Sea']);constselectedOption=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.

constcelsius=signal(25);// Base signal for temperature in Celsiusconstfahrenheit=linkedSignal(()=>celsius()*9/5+32);// Compute Fahrenheit from Celsiusconsole.log(fahrenheit());// 77 (25°C in Fahrenheit)// Change the Celsius valuecelsius.set(30);console.log(fahrenheit());// 86 (30°C in Fahrenheit)// Manually update Fahrenheit (breaks auto-link temporarily)fahrenheit.set(100);console.log(fahrenheit());// 100console.log(celsius());// Still 30, as Fahrenheit is overridden// Change Celsius again to reset linkagecelsius.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

© 2025Kristiyan Velkov. All rights reserved.