Angular 19 is approaching, and with it comes a wave of new capabilities. Among the most anticipated is the linkedSignal primitive, which is set to change how developers approach reactive programming within Angular applications.

The Challenge with Reset Patterns

Previously, implementing reset patterns required the use of computed() signals. While this method is functional, it comes with certain constraints. The primary issue arises when you need to explicitly assign a value to the signal; it becomes read-only, which limits its versatility.

The linkedSignal Approach

linkedSignal overcomes this constraint by offering a writable signal that automatically refreshes its value in response to modifications in a source signal. This creates a direct synchronization between the two signals, ensuring that the user experience remains fluid and without interruptions.

Exploring linkedSignal

While linkedSignal is designed with several overloads, two stand out as particularly important:
  • linkedSignal with Source and Computation
This particular overload enables you to set up a linkedSignal that determines its value based on the current value of a source signal. Here's an illustration: 
import { signal, linkedSignal } from '@angular/core';

  const sourceSignal = signal(0);
  const linkedSignal = linkedSignal({
    source: this.sourceSignal,
    computation: () => this.sourceSignal() * 5,
  });
In this case, the linkedSignal will consistently reflect double the value of sourceSignal. Any change to the source signal triggers an automatic recalculation of the linkedSignal. Consider a more practical scenario: Angular 19 linkedSignal Primitive The CourseDetailComponent accepts a courseId as an input and shows the current number of enrolled students. Our goal is to reset the student count whenever courseId changes. This requires a method to keep two signals—courseId and studentCount—in sync. Although computed() can effectively generate values from other signals, they are immutable. To adjust studentCount dynamically as courseId shifts, we utilize the linkedSignal primitive. By establishing a writable signal that is connected to courseId, we gain the ability to manually set studentCount while also having it update automatically when courseId changes. This method offers a strong and adaptable solution for managing signal dependencies and preserving data integrity.
  • linkedSignal Shorthand
For more straightforward cases, a simpler syntax is available to create a linkedSignal: 
const sourceSignal = signal(10);
const linkedSignal = linkedSignal(() => sourceSignal() * 2);
This short form is functionally identical to the initial overload but is more succinct and generally simpler to interpret.

Main Advantages of LinkedSignals

  • Streamlined Reset Patterns: Implement reset procedures easily without the intricacies associated with computed() signals.
  • Greater Flexibility: Retain the capability to explicitly define signal values while still receiving automatic updates.
  • Better Performance: Built to handle updates efficiently under the surface.
  • More Elegant Code: Results in clearer, more concise code, particularly in complex reactive situations.

Final Thoughts

linkedSignal represents a valuable new addition to Angular's reactive toolkit. By grasping its fundamental principles and application patterns, you can develop more resilient, responsive, and user-friendly Angular applications. By merging the strengths of computed() with those of writable signals, linkedSignal is set to become an essential tool for Angular developers. Further details and examples are available via this stackblitz. Github PR: https://github.com/angular/angular/pull/58189