Angular Pipes

Pipes transform data in templates without modifying the source data — useful for formatting dates, currencies, strings, and more.

Built-in Pipes

<!-- Date -->
<p>{{ today | date }}</p>                    <!-- Jan 1, 2025 -->
<p>{{ today | date:'dd/MM/yyyy' }}</p>       <!-- 01/01/2025 -->
<p>{{ today | date:'fullDate' }}</p>         <!-- Wednesday, January 1, 2025 -->

<!-- Currency -->
<p>{{ price | currency }}</p>               <!-- $1,234.56 -->
<p>{{ price | currency:'EUR':'symbol' }}</p> <!-- €1,234.56 -->

<!-- Number -->
<p>{{ 3.14159 | number:'1.2-2' }}</p>      <!-- 3.14 -->

<!-- String -->
<p>{{ 'hello' | uppercase }}</p>            <!-- HELLO -->
<p>{{ 'WORLD' | lowercase }}</p>            <!-- world -->
<p>{{ 'john doe' | titlecase }}</p>         <!-- John Doe -->

<!-- Array -->
<p>{{ items | slice:0:3 | json }}</p>

<!-- Async pipe — subscribes/unsubscribes automatically -->
<p>{{ user$ | async }}</p>

Chaining Pipes

<p>{{ name | titlecase | slice:0:10 }}</p>

Custom Pipe

ng generate pipe truncate

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

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 50, suffix: string = '...'): string {
    if (value.length <= limit) return value;
    return value.substring(0, limit) + suffix;
  }
}

<p>{{ longText | truncate:100 }}</p>