Angular Pipes

How it works

ToolCountPipe turns a count into a readable singular or plural label. The transform method receives the value and returns text; Angular can reuse pure pipe results when its inputs have not changed. Built-in date, number and currency pipes have locale and timezone considerations, so choose those contracts explicitly when output must be reproducible.

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 { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'toolCount', standalone: true })
class ToolCountPipe implements PipeTransform {
  transform(count: number): string {
    return count + (count === 1 ? ' tool' : ' tools');
  }
}
@Component({
  selector: 'bh-pipes',
  standalone: true,
  imports: [ToolCountPipe],
  template: `<p data-result>{{ count | toolCount }}</p>`,
})
export class App {
  count = 3;
}

Expected result

3 tools

The pipe returns 3 tools. A pure pipe reacts to its input values, not arbitrary mutations hidden inside an object. If a list changes, replacing the list reference can make that change visible to consumers whose contracts depend on reference identity.