Common Built-in Pipes
The plant card is technically correct and hard to read: "Tue Mar 03 2026 09:14:00 GMT+0530", "349.5", "0.62". The data is right; its presentation is wrong. You could write formatting methods for each, but Angular already ships them as pipes.
The rule
A pipe changes how a value looks, never what it is.
A pipe sits after a | in a template expression and turns the value on its left into display text:
<h3>{{ plant().name | titlecase }}</h3>
<p>Last watered {{ plant().lastWatered | date:'d MMM' }}</p>
<p>Price {{ plant().price | currency:'INR' }}</p>
<p>Humidity {{ plant().humidity | percent }}</p>With a name of 'boston fern', a price of 349.5 and humidity 0.62, this shows "Boston Fern", "Last watered 3 Mar", "Price ₹349.50" and "Humidity 62%" (for an English locale). The signal still holds the original values; only the screen changes.
The everyday set, all from @angular/common:
| Pipe | Class | Example output |
|---|---|---|
date |
DatePipe |
Mar 3, 2026, or any format you pass |
currency |
CurrencyPipe |
₹349.50 with currency:'INR' |
number |
DecimalPipe |
3.14 with number:'1.0-2' |
percent |
PercentPipe |
62% from 0.62 |
uppercase, lowercase, titlecase |
UpperCasePipe etc. |
Changes letter case |
json |
JsonPipe |
The object as JSON text, handy for debugging |
slice |
SlicePipe |
Part of a string or array |
async |
AsyncPipe |
The latest value of a promise or observable |
Arguments follow a colon: date:'d MMM', number:'1.0-2' (at least 1 whole digit, 0 to 2 decimals).
Because pipes are template dependencies, a standalone component must import each class it uses:
imports: [DatePipe, CurrencyPipe, PercentPipe, TitleCasePipe],Notice that the number pipe's class is DecimalPipe, a common stumble.
The shortcut
When raw data looks ugly on screen, name its type first: date, money, ratio, count, text. Each type has one natural pipe. Then pick the argument that matches how a person would say it aloud.
Name the type
nextWateringis a Date.
The trap is formatting values in the class and storing the formatted strings. Then you cannot sort by date or add up prices any more. Keep raw data in signals and format at the last moment, in the template.
Drills
Answer fast — trust the rule.
What does {{ 0.62 | percent }} display?
Which class must be imported to use the number pipe?
After {{ plant().name | uppercase }}, what does plant().name hold?
How do you pass the format 'd MMM' to the date pipe?
Remember
- Pipes format values for display; the underlying data stays the same.
- Name the value's type, pick its pipe, pass arguments after
:, and import the pipe class. - Trap: storing pre-formatted strings; format in the template instead.