Pipes

Pipes

Pipes transform data for display in templates. They take a value, process it, and output a formatted result — without changing the original data.

Pipe Syntax

<!-- value | pipeName -->
<p>{{ name | uppercase }}</p>

<!-- value | pipeName:arg1:arg2 -->
<p>{{ birthday | date:'fullDate' }}</p>

Built-in Pipes

String Pipes

{{ 'hello world' | uppercase }}      <!-- "HELLO WORLD" -->
{{ 'HELLO WORLD' | lowercase }}      <!-- "hello world" -->
{{ 'hello world' | titlecase }}      <!-- "Hello World" -->

Date Pipe

// component
today = new Date();

// template
{{ today | date }}                    <!-- "Mar 13, 2026" -->
{{ today | date:'short' }}            <!-- "3/13/26, 10:30 PM" -->
{{ today | date:'fullDate' }}         <!-- "Friday, March 13, 2026" -->
{{ today | date:'yyyy-MM-dd' }}       <!-- "2026-03-13" -->
{{ today | date:'hh:mm a' }}          <!-- "10:30 PM" -->
{{ today | date:'EEEE' }}             <!-- "Friday" -->

Number / Decimal Pipe

{{ 3.14159 | number:'1.2-2' }}        <!-- "3.14" -->
{{ 42 | number:'3.0-0' }}             <!-- "042" -->
{{ 1234567 | number }}                <!-- "1,234,567" -->

// Format: 'minIntDigits.minFracDigits-maxFracDigits'

Currency Pipe

{{ 99.99 | currency }}                <!-- "$99.99" -->
{{ 99.99 | currency:'EUR' }}          <!-- "€99.99" -->
{{ 99.99 | currency:'GBP':'symbol' }} <!-- "£99.99" -->
{{ 1500 | currency:'INR' }}           <!-- "₹1,500.00" -->

Percent Pipe

{{ 0.85 | percent }}                  <!-- "85%" -->
{{ 0.856 | percent:'1.1-1' }}         <!-- "85.6%" -->

JSON Pipe (Debugging)

<pre>{{ user | json }}</pre>
<!-- Outputs:
{
    "name": "Alice",
    "age": 25,
    "role": "admin"
}
-->

The json pipe is incredibly useful for debugging — it pretty-prints objects in the template.

Slice Pipe

// Array slicing
{{ ['a','b','c','d','e'] | slice:1:3 }}  <!-- "b,c" -->

// String slicing
{{ 'Hello World' | slice:0:5 }}          <!-- "Hello" -->

// Usage: show first N items
<div *ngFor="let item of items | slice:0:5">
    {{ item }}
</div>

Chaining Pipes

<!-- Apply multiple pipes left to right: -->
{{ 'hello' | uppercase | slice:0:3 }}   <!-- "HEL" -->
{{ birthday | date:'fullDate' | uppercase }} <!-- "FRIDAY, MARCH 13, 2026" -->

All Built-in Pipes

Pipe	Purpose
uppercase	Convert to UPPERCASE
lowercase	Convert to lowercase
titlecase	Convert to Title Case
date	Format dates
number	Format numbers with commas/decimals
currency	Format as currency
percent	Format as percentage
json	Pretty-print JSON
slice	Subset of array or string
async	Unwrap Observables/Promises

Key Takeaways

• Pipes transform data for display: {{ value | pipe }}
• Pass arguments with colons: {{ value | pipe:arg1:arg2 }}
• Chain multiple pipes: {{ value | pipe1 | pipe2 }}
• Pipes don't modify the original data — they're pure transformations
• Use json pipe for debugging object values in templates