Angular 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.

The above is the detailed content of Angular linkedSignal. For more information, please follow other related articles on the PHP Chinese website!