Angular Academy · Lesson

linkedSignal and Advanced Patterns

Coordinate dependent signals reactively.

Lesson 4 of 413 steps

linkedSignal and Advanced Patterns is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “linkedSignal and Advanced Patterns” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “linkedSignal and Advanced Patterns”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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