linkedSignal with custom set

1. Basic linkedSignal

Resets to the first option whenever shippingOptions changes. Manual selection via .set() is overwritten on source change.

Selected: Ground

selectedOption = linkedSignal(() => this.shippingOptions()[0]);

2. With previous , Smart Selection

Uses source + computation with previous to preserve the user's selection if it still exists in the new options.

Selected: Ground ($5)

smartSelection = linkedSignal<ShippingMethod[], ShippingMethod>({
  source: this.smartOptions,
  computation: (newOptions, previous) => {
    if (previous) {
      const found = newOptions.find(o => o.id === previous.value.id);
      if (found) return found;
    }
    return newOptions[0];
  },
});

3. Custom set , Temperature Converter

tempFahrenheit is derived from tempCelsius. Setting Fahrenheit writes back to the Celsius source signal via the custom set option.

0°C = 32°F — Freezing

tempFahrenheit = linkedSignal(
  () => Math.round((this.tempCelsius() * 9) / 5 + 32),
  {
    set: (valF) => this.tempCelsius.set(Math.round(((valF - 32) * 5) / 9)),
  }
);

4. set with rawSet , Nested Property

orderShipping is linked to order().shippingMethod. The custom set receives rawSet to update the linked signal directly, while also writing back to the parent object.

{
  "id": 42,
  "customerName": "Alice",
  "shippingMethod": "Ground",
  "notes": ""
}

orderShipping = linkedSignal(() => this.order().shippingMethod, {
  set: (newMethod, rawSet) => {
    this.order.update(current => ({ ...current, shippingMethod: newMethod }));
    rawSet(newMethod);
  },
});