Built-in Pipes (uppercase, date, currency)

Built-in Pipes in Angular

Let's dive into Built-in Pipes in Angular — a super handy way to format data directly in your templates. Pipes transform your data's display without changing the actual value.

---

🛠 What is a Pipe?

A Pipe takes in data as input and transforms it to a desired format.

You use pipes with the | (pipe) character in templates.

---

✅ Common Built-in Pipes

Pipe	Description	Example
uppercase	Transforms text to all uppercase	'hello' | uppercase → HELLO
lowercase	Transforms text to all lowercase	'HELLO' | lowercase → hello
titlecase	Capitalizes first letter of each word	'angular pipe' | titlecase → Angular Pipe
date	Formats a date	today | date:'fullDate'
currency	Formats number as currency	123.45 | currency:'EUR' → €123.45
percent	Formats number as percentage	0.25 | percent → 25%
number	Formats number with comma separators	12345.6789 | number:'1.2-2' → 12,345.68
slice	Returns a subset of string/array	'Angular' | slice:1:4 → ngu

---

🔍 Examples in Template

<p>{{ 'angular' | uppercase }}</p> <!-- ANGULAR -->
<p>{{ 0.756 | percent }}</p> <!-- 75.6% -->
<p>{{ 1234.56 | currency:'USD' }}</p> <!-- $1,234.56 -->
<p>{{ today | date:'shortDate' }}</p> <!-- 4/21/25 (example) -->

You can even chain pipes:

<p>{{ 'pipe chaining' | uppercase | slice:0:4 }}</p> <!-- PIPE -->

---

🧪 In Component

today = new Date();

---