Angular Linked Signals

Learn Angular Linked Signals with practical examples, dependent state management, architecture diagrams, enterprise use cases, best practices, and interview questions.

Linked Signals are an advanced Signals feature introduced in modern Angular to create dependent writable state.

Unlike Computed Signals, which are read-only, a Linked Signal creates a writable Signal whose value is automatically synchronized with another source Signal.

This makes Linked Signals ideal when:

State depends on another Signal
The value should automatically reset when the source changes
Users can still modify the derived value
Forms need default values based on selected objects
UI selections depend on changing data

Linked Signals help reduce boilerplate while keeping state synchronized.

What are Linked Signals?
Why Linked Signals?
Linked Signals Architecture
Creating a Linked Signal
How Linked Signals Work
Linked Signal vs Computed Signal
Linked Signal vs Writable Signal
Enterprise Banking Example
Performance Best Practices
Common Mistakes
Top 10 Interview Questions
Summary

What are Linked Signals?

A Linked Signal is a writable Signal whose default value is derived from another Signal.

Unlike computed():

It can be updated manually
It automatically resets when its source Signal changes

Think of it as:

A writable Signal that stays synchronized with another Signal.

Linked Signal Architecture

flowchart LR

SourceSignal

SourceSignal --> LinkedSignal

LinkedSignal --> Component

Component --> UI

Why Do We Need Linked Signals?

Imagine an e-commerce application.

The selected product changes.

Each product has a default quantity.

Without Linked Signals,

you would manually synchronize quantity every time the selected product changes.

With Linked Signals,

Angular performs that synchronization automatically.

Benefits:

Less boilerplate
Automatic synchronization
Better readability
Easier maintenance

Creating a Linked Signal

import {

signal,
linkedSignal

} from '@angular/core';

selectedProduct = signal({

id: 1,

name: 'Laptop',

quantity: 1

});

quantity = linkedSignal(() =>

this.selectedProduct().quantity

);

Initially,

quantity() = 1

Whenever the selected product changes,

the quantity automatically updates.

Updating a Linked Signal

Unlike Computed Signals,

Linked Signals are writable.

quantity.set(5);

Current value

The user can change the quantity independently.

Automatic Reset

selectedProduct.set({

id:2,

name:'Phone',

quantity:2

});

Angular automatically resets

quantity() = 2

No manual synchronization code is required.

Synchronization Flow

sequenceDiagram

participant Product

participant LinkedSignal

participant UI

Product->>LinkedSignal: Product Changed

LinkedSignal->>UI: Reset Quantity

UI->>LinkedSignal: User Updates Quantity

LinkedSignal-->>UI: Quantity Updated

Linked Signal Lifecycle

flowchart TD

SourceSignalChanged

SourceSignalChanged --> LinkedSignalReset

LinkedSignalReset --> UserUpdate

UserUpdate --> NextSourceChange

Linked Signal vs Computed Signal

Feature	Linked Signal	Computed Signal
Readonly	❌ No	✅ Yes
Writable	✅ Yes	❌ No
Automatic Synchronization	✅ Yes	✅ Yes
Manual Updates	✅ Yes	❌ No
Derived Value	✅ Yes	✅ Yes
Best Use Case	Editable dependent state	Calculated values

Linked Signal vs Writable Signal

Feature	Writable Signal	Linked Signal
Manual Updates	✅ Yes	✅ Yes
Automatic Reset	❌ No	✅ Yes
Derived From Source	❌ No	✅ Yes
Independent State	✅ Yes	❌ Initially linked

Shopping Cart Example

selectedItem = signal({

name:'Laptop',

quantity:1

});

cartQuantity = linkedSignal(() =>

this.selectedItem().quantity

);

User changes

cartQuantity.set(4);

User selects another item

selectedItem.set({

name:'Phone',

quantity:2

});

Result

cartQuantity() = 2

Banking Example

Customer selects an account.

selectedAccount = signal({

id:100,

currency:'USD'

});

Preferred currency automatically follows the selected account.

currency = linkedSignal(() =>

this.selectedAccount().currency

);

The user can temporarily change the currency selection.

When another account is selected,

the currency automatically resets.

Enterprise Banking Architecture

flowchart TD

Customer

Customer --> SelectedAccount

SelectedAccount --> LinkedCurrency

LinkedCurrency --> TransferScreen

TransferScreen --> UserChanges

Benefits

Cleaner forms
Automatic synchronization
Better user experience
Less manual code

Dynamic Form Example

selectedCountry = signal({

name:'USA',

currency:'USD'

});

currency = linkedSignal(() =>

this.selectedCountry().currency

);

Whenever the country changes,

the currency updates automatically.

The user can still modify the currency before submitting the form.

Linked Signals vs Effects

Some developers use Effects for synchronization.

❌ Less Preferred

effect(() => {

this.quantity.set(

this.selectedProduct().quantity

);

});

This mixes synchronization logic into an Effect.

✅ Better

quantity = linkedSignal(() =>

this.selectedProduct().quantity

);

Linked Signals express this intent directly and more clearly.

Performance Best Practices

Practice	Benefit
Use Linked Signals for editable derived state	Cleaner architecture
Use Computed Signals for calculated values	Better separation of concerns
Keep source Signals small	Faster updates
Avoid unnecessary dependencies	Better performance
Prefer immutable updates	Predictable state
Use readonly Signals where editing isn't required	Better encapsulation

Common Mistakes

Using Computed Instead of Linked Signal

❌ Wrong

quantity = computed(() =>

this.product().quantity

);

The value cannot be edited.

✅ Correct

quantity = linkedSignal(() =>

this.product().quantity

);

Using Linked Signals for Pure Calculations

For totals or formulas,

use

computed()

instead.

Using Effects for Synchronization

Avoid writing synchronization Effects when a Linked Signal expresses the relationship directly.

Linking Unrelated State

Only link Signals that have a meaningful dependency.

Avoid creating unnecessary relationships.

Large Source Objects

Avoid storing huge objects in a single Signal.

Split state into focused Signals when possible.

Best Practices

Use Linked Signals for editable dependent state.
Use Computed Signals for calculated values.
Avoid synchronization Effects where Linked Signals fit.
Keep source Signals focused.
Prefer immutable updates.
Minimize dependencies.
Use readonly Signals when editing isn't required.
Test synchronization behavior.
Keep UI state predictable.
Choose the correct Signal type for each use case.

Advantages

Feature	Benefit
Automatic Synchronization	Less boilerplate
Writable	User can edit
Reactive	Updates automatically
Better Forms	Cleaner UX
Enterprise Ready	Simpler state management
Fine-Grained Updates	Improved performance

Real-World Use Cases

Scenario	Use Linked Signal?
Shopping Cart Quantity	✅ Yes
Selected Shipping Address	✅ Yes
Preferred Currency	✅ Yes
Default Language	✅ Yes
Product Price Total	❌ Use Computed
Tax Calculation	❌ Use Computed
Search Results	❌ Use RxJS
HTTP Requests	❌ Use RxJS

Interview Cheat Sheet

Requirement	Best Choice
Editable Derived State	`linkedSignal()`
Calculated Value	`computed()`
UI State	`signal()`
Side Effects	`effect()`
HTTP Requests	RxJS
User Editable Default	`linkedSignal()`
Readonly Calculation	`computed()`
Synchronization	`linkedSignal()`
Async Streams	RxJS
Manual Updates	`linkedSignal()`

Summary

Angular Linked Signals simplify one of the most common UI patterns: maintaining editable state that depends on another piece of state. They automatically synchronize with a source Signal while remaining writable, making them ideal for forms, selections, and default values. Used alongside Signals, Computed Signals, Effects, and RxJS, Linked Signals help build cleaner, more maintainable, and highly reactive Angular applications.

Key Takeaways

✔ Linked Signals create writable dependent state.
✔ They automatically synchronize with a source Signal.
✔ Users can still modify their values.
✔ Use them for editable defaults and dependent form state.
✔ Computed Signals remain the best choice for calculated values.
✔ Effects should be reserved for side effects.
✔ RxJS is still the preferred solution for asynchronous workflows.
✔ Keep source Signals small and focused.
✔ Prefer immutable state updates.
✔ Linked Signals are an advanced Angular Signals interview topic.

➡️ 85-Resources-API-QA.md

Angular Linked Signals

Table of Contents