Pipes
Imagine you have data in your component, but you want to display it differently – a date in a specific format, text in uppercase, or a number as currency. Pipes are Angular's way of transforming data directly in your templates.
Pipes take in data and output transformed data. The syntax uses the pipe symbol
|.Here are the most commonly used built-in pipes:
1. DatePipe – Formats dates
<p>{{ today | date }}</p> <!-- Mar 16, 2026 -->
<p>{{ today | date:'fullDate' }}</p> <!-- Monday, March 16, 2026 -->
<p>{{ today | date:'dd/MM/yyyy' }}</p> <!-- 16/03/2026 -->
2. CurrencyPipe – Formats numbers as currency
<p>{{ price | currency }}</p> <!-- $100.00 -->
<p>{{ price | currency:'INR' }}</p> <!-- ₹100.00 -->
<p>{{ price | currency:'EUR':'symbol':'4.2-2' }}</p>
3. DecimalPipe (number) – Formats numbers
<p>{{ 3.14159 | number:'1.2-2' }}</p> <!-- 3.14 -->
<p>{{ 12345.6789 | number:'1.2-2' }}</p> <!-- 12,345.68 -->
4. UpperCasePipe and LowerCasePipe
<p>{{ 'Hello World' | uppercase }}</p> <!-- HELLO WORLD -->
<p>{{ 'Hello World' | lowercase }}</p> <!-- hello world -->
5. PercentPipe
<p>{{ 0.25 | percent }}</p> <!-- 25% -->
<p>{{ 0.1234 | percent:'1.2-2' }}</p> <!-- 12.34% -->
6. JsonPipe – For debugging
<pre>{{ user | json }}</pre>
You can chain multiple pipes:
<p>{{ birthday | date:'fullDate' | uppercase }}</p>
Two Minute Drill
- Pipes transform data in templates using
|. - Built-in pipes: date, currency, number, uppercase, lowercase, percent, json.
- Pipes can take parameters: `{{ value | pipeName:'param1':'param2' }}`.
- Chain multiple pipes: `{{ value | pipe1 | pipe2 }}`.
- Pipes are pure by default – they only run when input changes.
Need more clarification?
Drop us an email at career@quipoinfotech.com