bhylu.com

Advertisements

Angular Components

A component combines a view with the state and operations that own it. Compose small components when they represent a useful boundary, not simply to split every few HTML tags into another file.

How it works

The root hosts a reusable tool card. Its selector is listed in the parent’s imports because standalone components declare their template dependencies directly. A child’s class is not automatically visible as a global service or template variable. Keep the child responsible for its own presentation and give shared behavior an explicit input, output or injected contract rather than reaching into another component’s private state.

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';

@Component({
  selector: 'tool-card',
  standalone: true,
  template: '<article><h2>Hand drill</h2><p>Return at the desk.</p></article>',
})
class ToolCard {}
@Component({
  selector: 'bh-components',
  standalone: true,
  imports: [ToolCard],
  template: `<tool-card></tool-card>
    <p data-result>One tool card mounted</p>`,
})
export class App {}

Expected result

One tool card mounted

Angular creates the ToolCard view inside its host element. The root remains responsible for overall screen composition. As the card becomes configurable, the next lessons give it a typed input and a deliberate way to report a user action.

Advertisements