DEV Community

Kristiyan Velkov
Kristiyan Velkov

Posted on • Edited on • Originally published at Medium

3

Angular 19: linkedSignal

Image description

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]);
Enter fullscreen mode Exit fullscreen mode

Step-by-Step:

  1. Initial Value:
console.log(selectedOption()); // 'Ground'
Enter fullscreen mode Exit fullscreen mode

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

  1. Manual Update:
selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up