Angular Quiz

Your brief

A computed total depends on a count signal and a fixed allowance. Will changing the count update the total? Should the application set the computed value directly? Does this local arithmetic establish that a server accepted a loan? The example is small enough to answer those questions before running it. Then change the allowance into a signal and explain how that changes the dependency graph.

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

@Component({
  selector: 'bh-quiz',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="count.set(3)">Use three</button>
    <p data-result>{{ total() }} allowance units</p>`,
})
export class App {
  count = signal(1);
  total = computed(() => this.count() * 2);
}

Expected result

2 allowance units

The total becomes six after the count changes. The computed value is derived rather than an independent write target, and the result is only a local calculation. Similar distinctions help debug component inputs, shared service state and asynchronously resolved results.