Angular Pipes

Name: Angular Pipes
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

178 installs
6 repo stars
Updated April 4, 2026
oguzhan18/angular-ecosystem-skills

Create pure and impure custom pipes to format dates, currency, labels, and domain values in templates while keeping components lean and reusable across lists and detail views.

About

Explains Angular built-in and custom pipes for template data transformation including dates, currency, async observables, pure vs impure behavior, and testable formatting utilities for views.

Built-in DatePipe and CurrencyPipe usage
Pure vs impure pipe semantics
Custom pipe creation and testing
Async pipe with Observables
Performance considerations in lists

Angular Pipes by the numbers

178 all-time installs (skills.sh)
+2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #898 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-pipes

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oguzhan18/angular-ecosystem-skills/angular-pipes.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-pipes)

Installs	178
repo stars	★ 6
Last updated	April 4, 2026
Repository	oguzhan18/angular-ecosystem-skills ↗

What it does

Create pure and impure custom pipes to format dates, currency, labels, and domain values in templates while keeping components lean and reusable across lists and detail views.

Files

SKILL.mdMarkdownGitHub ↗

Angular Pipes

Version: Angular 21 (2025) Tags: Pipes, Transform, Format, Async

References: Pipes Guide • API

API Changes

This section documents recent version-specific API changes.

NEW: Standalone pipes — All pipes can be standalone

NEW: Signal-based pipes — Pipes can use signals

NEW: inject() in pipes — Use functional DI in pipes

DEPRECATED: Impure pipes — Avoid for performance; use pure pipes

Best Practices

Use pure pipes for stateless transformations

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize',
  standalone: true
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Use pipes in templates

@Component({
  template: `
    <p>{{ name | capitalize }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ items | json }}</p>
  `
})
export class MyComponent {}

Use pipe with parameters

@Pipe({ name: 'slice' })
export class SlicePipe implements PipeTransform {
  transform(value: string, start: number, end?: number): string {
    return value.slice(start, end);
  }
}

// Usage: {{ text | slice:0:10 }}

Use async pipe for observables

@Component({
  template: `
    @if (user$ | async; as user) {
      <p>{{ user.name }}</p>
    }
  `
})
export class UserComponent {
  user$ = this.userService.getUser();
}

Use impure pipes only when necessary

@Pipe({
  name: 'myPipe',
  pure: false // Impure - runs on every change detection
})
export class ImpurePipe implements PipeTransform {}

Use KeyValue pipe for object iteration

@Component({
  template: `
    @for (item of object | keyvalue; track item.key) {
      {{ item.key }}: {{ item.value }}
    }
  `
})
export class MyComponent {
  object = { a: 1, b: 2 };
}

Use Json pipe for debugging

@Component({
  template: `
    <pre>{{ object | json }}</pre>
  `
})
export class DebugComponent {}

Chain pipes

@Component({
  template: `
    {{ name | uppercase | slice:0:5 }}
  `
})
export class ChainedPipeComponent {}

Use standalone pipes in imports

@Component({
  standalone: true,
  imports: [DatePipe, CurrencyPipe, CapitalizePipe],
  template: `{{ date | date }}`
})
export class MyComponent {}

Use inject() in pipes

@Pipe({ name: 'translate', standalone: true })
export class TranslatePipe implements PipeTransform {
  private service = inject(TranslateService);

  transform(key: string): string {
    return this.service.get(key);
  }
}