Linked Signals (v.19 experimental)

9 snippets

20 mins

v.19

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

We know that from Angular v.17 we can create a signal using the following syntax:

And we have seen how we can create derived states by using computed properties:

Example

In the next snippet we define a counter signal that is incremented by 1 at each click of the increment button.

We also create a computed property, double, representing the value multiplied by 2.

computed are not writable!

However the computed properties are not writable and therefore in the following example, when we (try to) set its value to 0 we receive a compiler error that notifies us that the set method is not available:

Here's the full source code (that won't work because of the reset method):

src/app.component.ts

# Linked Signals (v.19)

Linked Signal, a new signal type, has been introduced in Angular v.19 for this reason.

A LinkedSignal combines the advantages of computed, which creates a reactive derived state, with the flexibility of the signals, which are writeable.

LinkedSignal is currently in the experimental phase and may be subject to changes

The following script creates:

a new counter signal
a new double linkedSignal which creates a new derived signal that depends on counter.

It works exactly like a computed property but, as we said, this signal is now writable:

Using a LinkedSignal we can now update its value:

Here's the full source code in which he reset() method sets the linkedSignal value to 0, while the counter signal always contains its current value:

The following example is an interactive playground

Click or in the editor to practice

src/app.component.ts

# ShortHand Notation

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Linked Signals (v.19 experimental)

9 snippets

20 mins

v.19

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

We know that from Angular v.17 we can create a signal using the following syntax:

And we have seen how we can create derived states by using computed properties:

Example

In the next snippet we define a counter signal that is incremented by 1 at each click of the increment button.

We also create a computed property, double, representing the value multiplied by 2.

computed are not writable!

Here's the full source code (that won't work because of the reset method):

src/app.component.ts

# Linked Signals (v.19)

Linked Signal, a new signal type, has been introduced in Angular v.19 for this reason.

A LinkedSignal combines the advantages of computed, which creates a reactive derived state, with the flexibility of the signals, which are writeable.

LinkedSignal is currently in the experimental phase and may be subject to changes

The following script creates:

a new counter signal
a new double linkedSignal which creates a new derived signal that depends on counter.

It works exactly like a computed property but, as we said, this signal is now writable:

Using a LinkedSignal we can now update its value:

Here's the full source code in which he reset() method sets the linkedSignal value to 0, while the counter signal always contains its current value:

The following example is an interactive playground

Click or in the editor to practice

src/app.component.ts

Angular Cookbook

Send your feedback

Angular Cookbook

# Introduction

Example

# Linked Signals (v.19)

# ShortHand Notation

Send your feedback

# Introduction

Example

# Linked Signals (v.19)

# ShortHand Notation

# More Resources