Angular Academy · Lesson

linkedSignal and Advanced Patterns

Coordinate dependent signals reactively.

linkedSignal and Advanced Patterns is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The problem linkedSignal solves

Sometimes you want writable state that also resets when some source changes. A plain computed is read-only; a plain signal does not auto-reset. linkedSignal() bridges the gap: writable state derived from a source.

Basic linkedSignal

Pass a computation. The result is a writable signal that recomputes when its source changes, but can also be set manually.

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

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

Why not just a signal?

A plain signal initialized once would keep a stale value after the source changes. linkedSignal re-derives whenever the source changes while still allowing writes in between.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

The source/computation form

The advanced form separates source from computation, and gives access to the previous value — useful to preserve a selection if it still exists.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

Preserving user choice

The previous-value pattern keeps the user selection if it still exists after the list updates, otherwise falls back to a default — a great UX touch.

linkedSignal is writable

Unlike computed, you can call .set() and .update() on a linkedSignal. The manual value holds until the source changes again.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

Pattern: dependent dropdowns

Country -> City: when the country changes, reset the city to the first available, but allow the user to pick another.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

Pattern: optimistic UI state

linkedSignal can hold an optimistic value derived from server data, while letting the UI override it immediately and resync when fresh data arrives.

Combining with effects

You can react to linkedSignal changes with an effect, e.g. to persist the current selection.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

When NOT to use linkedSignal

If the derived value is purely read-only, use computed(). If the value never needs to reset from a source, use a plain signal(). Reach for linkedSignal only when you need both writable and source-resettable.

Advanced reactive graph

signal -> computed -> linkedSignal -> effect forms a complete reactive pipeline: raw inputs, pure derivations, writable resettable state, and side effects — all without manual subscriptions.

Quick Check

Test your understanding of linkedSignal.

Recap: linkedSignal & Advanced Patterns

linkedSignal() gives you writable state that resets from a source.

Use the source/computation form to preserve a user selection.
Great for dependent dropdowns and optimistic UI.
Use computed for read-only, plain signal for non-resetting state.

You have completed the Signals course.

Frequently asked questions

Is the “linkedSignal and Advanced Patterns” lesson free?

Yes — the full text of “linkedSignal and Advanced Patterns” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “linkedSignal and Advanced Patterns”?

Coordinate dependent signals reactively. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “linkedSignal and Advanced Patterns” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy