Angular Signal Exercises

Your brief

The task is to reserve at most two local demonstration slots. Keep the count in a signal and expose a method that refuses to increase it after capacity is reached. Decide whether the UI should disable the button, show a refusal or both. The worked solution keeps the button active so the boundary remains observable, but a production control would also need a clear explanation of why an action is unavailable.

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 { signal } from '@angular/core';

@Component({
  selector: 'bh-exercises',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="reserve()">Reserve demo slot</button>
    <p data-result>{{ count() }} of 2 reserved</p>`,
})
export class App {
  count = signal(0);
  reserve(): void {
    this.count.update((value) => Math.min(2, value + 1));
  }
}

Expected result

0 of 2 reserved

The first two clicks reach capacity and another click leaves the count at two. The test verifies that boundary through the real event binding. Extend the task with cancellation, then write tests proving repeated cancellation cannot push the count below zero.

Try a change

Add cancellation with a minimum of zero. Explain and test what happens when cancel is pressed before any reservation.