Angular Pipe Pattern

Create custom Angular pipes for pure data transformation and use built-in pipes correctly to keep templates declarative and performant

When to Use

• Formatting data in templates (currency, date, truncation, pluralization) without component logic
• Reusing a display transformation across multiple templates
• Replacing complex template expressions (

  {{ item.name.length > 20 ? item.name.slice(0, 20) + '...' : item.name }}

  ) with a readable pipe
• Using

  AsyncPipe

  to handle observable/promise subscriptions and change detection automatically
• Building pipes that inject services for locale-aware or permission-aware formatting

Instructions

1. Implement the

   PipeTransform

   interface and decorate with

   @Pipe({ name: 'myPipe', standalone: true })

   .
2. Keep pipes pure by default (

   pure: true

   is the default). Pure pipes only re-run when the input reference changes — this is a significant performance optimization.
3. Mark a pipe

   pure: false

   (impure) only when the output depends on something other than the input arguments (e.g., reading from a changing service or the current time). Impure pipes run on every change detection cycle.
4. Inject services into pipes via

   inject()

   for locale-aware formatting, permission checks, or translation.
5. Use

   | async

   in templates instead of manual subscriptions — it subscribes, unsubscribes on destroy, and triggers change detection when values emit.
6. Prefer

   | date:'shortDate'

   ,

   | currency:'USD'

   ,

   | number:'1.2-2'

   ,

   | titlecase

   ,

   | keyvalue

   built-ins before writing custom pipes.
7. Name pipes with a consistent convention:

   camelCase

   in the class, matching

   camelCase

   in the

   name

   field. Use verb-noun for transformation pipes (

   truncate

   ,

   highlight

   ,

   formatBytes

   ).
8. Add the standalone pipe to the

   imports

   array of components that use it.

// truncate.pipe.ts — pure transformation
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 100, suffix = '...'): string {
    if (!value) return '';
    return value.length > limit ? `${value.slice(0, limit)}${suffix}` : value;
  }
}

// format-bytes.pipe.ts — custom formatting with multiple args
@Pipe({ name: 'formatBytes', standalone: true })
export class FormatBytesPipe implements PipeTransform {
  transform(bytes: number, decimals = 2): string {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
  }
}

// highlight.pipe.ts — service-injected pipe
import { Pipe, PipeTransform, inject } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'highlight', standalone: true })
export class HighlightPipe implements PipeTransform {
  private sanitizer = inject(DomSanitizer);

  transform(text: string, search: string): SafeHtml {
    if (!search) return text;
    const regex = new RegExp(`(${search})`, 'gi');
    const highlighted = text.replace(regex, '<mark>$1</mark>');
    return this.sanitizer.bypassSecurityTrustHtml(highlighted);
  }
}

<!-- Template usage -->
<p>{{ product.description | truncate:150 }}</p>
<p>{{ fileSize | formatBytes }}</p>
<p [innerHTML]="product.name | highlight:searchTerm"></p>
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
<p>{{ price | currency:'EUR':'symbol':'1.2-2' | uppercase }}</p>

Details

Pure vs impure pipes: Pure pipes cache their result for a given set of input references. If the input is the same object reference, Angular returns the cached result without calling

transform()

again. This makes pipes very efficient with

OnPush

components. Impure pipes (

pure: false

) run on every change detection cycle — use sparingly and only when necessary (e.g., a pipe filtering a mutable array).

AsyncPipe

advantages over manual subscriptions:

• Automatically calls

  subscribe()

  and

  unsubscribe()

  on the observable lifecycle tied to the component
• Calls

  markForCheck()

  on

  OnPush

  components when new values arrive — without this,

  OnPush

  components won't update
• Handles both

  Observable

  and

  Promise

  transparently

Pipe chaining: Pipes compose left to right:

{{ value | pipe1 | pipe2:arg }}

. Each pipe's output is the next pipe's input.

Avoiding impure pipes for filtering/sorting: A common mistake is creating an impure pipe that filters or sorts an array. Because the array reference doesn't change when items are pushed, a pure pipe won't re-run. Better solutions: filter in the component with

computed()

or a getter, or create a new array reference when the data changes.

Locale-aware built-in pipes:

DatePipe

,

CurrencyPipe

,

DecimalPipe

, and

PercentPipe

all use Angular's locale system. Provide a locale with

{ provide: LOCALE_ID, useValue: 'de-DE' }

to format numbers and dates for the user's locale automatically.

Testing pipes:

describe('TruncatePipe', () => {
  const pipe = new TruncatePipe();
  it('truncates long strings', () => {
    expect(pipe.transform('a'.repeat(200), 50)).toBe('a'.repeat(50) + '...');
  });
  it('returns short strings unchanged', () => {
    expect(pipe.transform('short', 50)).toBe('short');
  });
});

Source

https://angular.dev/guide/pipes

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.