bhylu.com

Advertisements

Angular Signals

A writable signal holds a value and notifies tracked consumers when it changes. Read it with a call and change it through set or update rather than modifying hidden state behind its back.

How it works

The desk starts with two available tools. A guarded operation decrements the count only when stock remains. The template reads the signal, so Angular knows the view depends on it. A signal is an in-memory reactive primitive, not a database transaction or a multi-user stock service. Its equality behavior also matters: mutating an object in place can leave the same reference and fail to communicate an intended update.

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.

Example

src/app.ts

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

@Component({
  selector: 'bh-signals',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="borrow()">Borrow one</button>
    <p data-result>{{ available() }} available</p>`,
})
export class App {
  available = signal(2);
  borrow(): void {
    this.available.update((value) => Math.max(0, value - 1));
  }
}

Expected result

2 available

The click changes the count to one. Repeated clicks cannot push this local count below zero. The browser tests check those boundary clicks, while a production lending operation would still require a trusted server-side stock rule.

Advertisements