linkedSignal()

About This Feature

linkedSignal() fills the gap between signal() (writable, no dependency) and computed() (derived, read-only). It starts derived from a computation but remains writable — a manual write is an override until the source signal changes, which resets it back to the computed value.

• Simple form:linkedSignal(() => source()) — derives value, resets on source change, allows manual writes.
• Advanced form:linkedSignal({ source, computation }) — receives the previous value in computation, useful for accumulation or keeping stale data visible while loading.

Code Example

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

// ── computed() — read-only ────────────────────────────
const base = signal(100);
const taxed = computed(() => base() * 1.1);

taxed.set(90); // ❌ TypeScript error — computed is Signal, not WritableSignal

// ── linkedSignal() — derived AND writable ─────────────
const discounted = linkedSignal(() => base() * 0.9);

discounted();     // → 90 (derived from base)
discounted.set(75); // ✅ manual override allowed
discounted();     // → 75

base.set(200);    // source changes → linkedSignal RESETS
discounted();     // → 180 (recomputed from new base)

// ── Advanced: linkedSignal with previous value ────────
const page = signal(1);

const items = linkedSignal<number, Item[]>({
  source: page,
  computation: (currentPage, previous) => {
    // 'previous.value' is the last resolved value
    // Useful for keeping stale data visible while loading
    return fetchPage(currentPage) ?? previous?.value ?? [];
  }
});

Live Demo — Price Calculator

Live Demo — Pagination with Previous Value