What is LinkedSignal for Bidirectional Reactivity?

import { Component, signal, linkedSignal } from '@angular/core';

@Component({
  template: `
    <select [value]="selectedOption()?.name" (change)="changeOption($event)">
      @for (opt of options(); track opt.id) {
        <option [value]="opt.name">{{ opt.name }}</option>
      }
    </select>
    <p>Selected: {{ selectedOption()?.name }}</p>
  `
})
export class ShippingSelector {
  options = signal([
    { id: 0, name: 'Ground' },
    { id: 1, name: 'Air' },
    { id: 2, name: 'Sea' }
  ]);

  // LinkedSignal auto-resets to first valid option if source changes
  selectedOption = linkedSignal({
    source: this.options,
    computation: (options, previous) => {
      // Preserve previous selection if still valid
      return options.find(opt => opt.id === previous?.id) || options[0];
    }
  });

  changeOption(event: Event) {
    const name = (event.target as HTMLSelectElement).value;
    this.selectedOption.set(this.options().find(opt => opt.name === name)!);
  }
}