Angular linkedSignal

How it works

The initial tool list supplies a default selection. A visitor can choose the clamp, then a refreshed list replaces the options and resets the choice to its first item. This differs from computed, which callers do not set directly. More complex linkedSignal configurations can inspect the previous value to preserve a still-valid selection instead of always taking the first option.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

• package.json
• angular.json
• tsconfig.json
• tsconfig.app.json
• tsconfig.spec.json
• src/index.html
• src/styles.css
• src/app.ts
• src/app.config.ts
• src/main.ts
• src/app.spec.ts
• fixture-server.mjs

Example

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

@Component({
  selector: 'bh-linked-signal',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="selected.set('Clamp')">Choose clamp</button
    ><button type="button" (click)="tools.set(['Level'])">Refresh tools</button>
    <p data-result>{{ selected() }}</p>`,
})
export class App {
  tools = signal(['Drill', 'Clamp']);
  selected = linkedSignal(() => this.tools()[0] ?? 'No tools');
}

Expected result

Drill

The test checks Drill, a manual Clamp selection and the reset to Level. The reset policy is part of the domain contract, not an incidental rendering trick. Validate selections at submission time too, because a screen’s available options may become stale.