LinkedSignal in Angular Explained

LinkedSignal is an advanced Angular signal primitive that creates writable signals intrinsically linked to source signals. Unlike computed() (read-only), LinkedSignal allows direct .set() and .update() while automatically maintaining valid values based on its source signals when they change.

Code Example:-

Code

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

@Component({
  template: `
    <select [value]="selectedOption()?.name" (change)="changeOption($event)">
      @for (opt of options(); track opt.id) {
        <option [value]="opt.name">{{ opt.name }}</option>
      }
    </select>
    <p>Selected: {{ selectedOption()?.name }}</p>
  `
})
export class ShippingSelector {
  options = signal([
    { id: 0, name: 'Ground' },
    { id: 1, name: 'Air' },
    { id: 2, name: 'Sea' }
  ]);

  // LinkedSignal auto-resets to first valid option if source changes
  selectedOption = linkedSignal({
    source: this.options,
    computation: (options, previous) => {
      // Preserve previous selection if still valid
      return options.find(opt => opt.id === previous?.id) || options[0];
    }
  });

  changeOption(event: Event) {
    const name = (event.target as HTMLSelectElement).value;
    this.selectedOption.set(this.options().find(opt => opt.name === name)!);
  }
}

Hire Now!

Need Help with Angular Development ?

Work with our skilled angular developers to accelerate your project and boost its performance.

**Hire now**Hire Now**Hire Now**Hire now**Hire now

Project Inquiry

Career Inquiry

India

A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India

Germany

Rheinsberger Str. 76,10115 Berlin, Germany

USA

611 Gateway Blvd, South San francisco, CA 94080, USA

Company Deck

PDF, 3MB

What is LinkedSignal for Bidirectional Reactivity?

Code Example:-

Code

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

@Component({
  template: `
    <select [value]="selectedOption()?.name" (change)="changeOption($event)">
      @for (opt of options(); track opt.id) {
        <option [value]="opt.name">{{ opt.name }}</option>
      }
    </select>
    <p>Selected: {{ selectedOption()?.name }}</p>
  `
})
export class ShippingSelector {
  options = signal([
    { id: 0, name: 'Ground' },
    { id: 1, name: 'Air' },
    { id: 2, name: 'Sea' }
  ]);

  // LinkedSignal auto-resets to first valid option if source changes
  selectedOption = linkedSignal({
    source: this.options,
    computation: (options, previous) => {
      // Preserve previous selection if still valid
      return options.find(opt => opt.id === previous?.id) || options[0];
    }
  });

  changeOption(event: Event) {
    const name = (event.target as HTMLSelectElement).value;
    this.selectedOption.set(this.options().find(opt => opt.name === name)!);
  }
}

What is LinkedSignal for Bidirectional Reactivity?

Need Help with Angular Development ?

Related Q&A

Describe Angular’s Renderer2 and when to use it.

Explain the purpose and usage of InjectionToken in Angular.

Explain Angular Router’s lazy loading and how to implement it.