bhylu.com

Advertisements

Angular Outputs

An output reports a component event to its parent. Use a domain value that explains the action instead of exposing an internal DOM event when the parent does not need it.

How it works

The card emits the selected tool code. The parent handles that code and owns the selected state. This keeps the child reusable: it does not need to know whether selection opens a drawer, updates a route or prepares a reservation. Angular component outputs do not automatically behave like arbitrary bubbling native DOM events, so bind to the child’s documented output explicitly.

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 { output, signal } from '@angular/core';
@Component({
  selector: 'tool-choice',
  standalone: true,
  template: '<button type="button" (click)="choose()">Choose drill</button>',
})
class ToolChoice {
  chosen = output<string>();
  choose(): void {
    this.chosen.emit('DR-4');
  }
}
@Component({
  selector: 'bh-outputs',
  standalone: true,
  imports: [ToolChoice],
  template: `<tool-choice (chosen)="selected.set($event)"></tool-choice>
    <p data-result>{{ selected() }}</p>`,
})
export class App {
  selected = signal('Nothing selected');
}

Expected result

Nothing selected

The emitted DR-4 value is the parent handler’s $event. After the click the summary shows that code. The event reports intent; it does not claim a server accepted a reservation. Keep that distinction visible when the operation becomes asynchronous.

Advertisements