bhylu.com

Advertisements

Angular Inputs

An input defines data supplied by a parent component. A required signal input makes the contract explicit and gives the child a reactive read of the supplied value.

How it works

The root chooses which tool name the card displays. The child reads name() and does not mutate the parent’s selection itself. A required input must be supplied wherever the child appears; strict template checking catches a missing binding. Changing the parent signal updates the child’s rendered text without manually recreating its DOM.

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 { input, signal } from '@angular/core';
@Component({
  selector: 'tool-label',
  standalone: true,
  template: '<p data-result>{{ name() }}</p>',
})
class ToolLabel {
  name = input.required<string>();
}
@Component({
  selector: 'bh-inputs',
  standalone: true,
  imports: [ToolLabel],
  template: `<tool-label [name]="name()"></tool-label
    ><button type="button" (click)="name.set('Clamp')">Choose clamp</button>`,
})
export class App {
  name = signal('Tape measure');
}

Expected result

Tape measure

The initial card reads Tape measure, then the parent’s click changes it to Clamp. The test checks the child output after the parent operation. An input’s TypeScript type helps callers at build time, but received API data must still be validated before it becomes an application record.

Advertisements