Skip to main content
Pipes transform expression results into display-ready values. The syntax is expression | pipeName, where the pipe receives the evaluated expression as input and produces a formatted output. Some pipes accept an argument after a colon — | pipeName:arg: 
{{ price | currency }}            →  "$1,234.00"
{{ score | percent:1 }}           →  "75.6%"     (1 decimal place)
{{ price * quantity | currency }} →  "$150.00"
{{ name | truncate:10 }}          →  "Arthur ..."  (max 10 chars)
Because pipe is the lowest-precedence operator, everything to the left evaluates first. price * quantity | currency means “multiply, then format” — not “format quantity, then multiply.”

​
Number Formatting

Numbers rarely belong in a UI raw. Prices need currency symbols and decimal alignment, ratios need percent signs, and KPIs need thousands separators. The number pipes handle locale-aware formatting so your expressions produce display-ready values:
PipeArgumentExampleResult
percentdecimal places (default 0){{ 0.756 | percent:1 }}75.6%
numberdecimal places{{ 1234 | number:2 }}1,234.00
currencycurrency code (default USD){{ 1234 | currency }}$1,234.00
abs{{ -42 | abs }}42
percent multiplies by 100 before formatting. number and currency use locale-formatted output (en-US).

​
Date and Time

Dates arrive from APIs as ISO strings — dense and machine-oriented. The date and time pipes transform them into human-friendly formats at varying levels of detail, from a terse 1/15/2025 to a full January 15, 2025, 2:30 PM:
PipeArgumentExample Output
dateshort1/15/2025
date(default: medium)Jan 15, 2025
datelongJanuary 15, 2025
time2:30 PM
datetimeJan 15, 2025, 2:30 PM
Pass an ISO date string as the input value. The time pipe also accepts time-only strings like "14:30".

​
String Formatting

String pipes adjust casing and length — upper and lower normalize text for headings or labels, while truncate clamps to a maximum character count and appends ... when the string overflows:
PipeArgumentDescription
upperUppercase the string
lowerLowercase the string
truncatemax lengthClamp to N characters, append ... if truncated

​
Array Operations

When state contains a list, you often need to summarize it — count the items, pull out the first or last entry, or collapse everything into a single readable string. The array pipes handle these without arithmetic or concatenation:
PipeArgumentDescription
lengthNumber of elements (also works on strings)
joinseparator (default , )Join elements into a string
firstFirst element
lastLast element

​
Pipe Arguments

The argument after : is always a simple token — a number, a string, or an identifier. It can’t be a sub-expression. A few more examples: 
{{ tags | join: - }}           → join with " - "
{{ price | currency:EUR }}     → format as euros
{{ name | default:Anonymous }} → fallback value

​
Chaining

Pipes chain left to right. Each pipe receives the output of the previous one: 
{{ name | lower | truncate:20 }}
This lowercases the name first, then truncates the result to 20 characters.

​
Default Value Shorthand

A bare literal after | acts as a default value when the left side is null or undefined: 
{{ name | 'Anonymous' }}   → "Anonymous" if name is undefined
{{ count | 0 }}            → 0 if count is undefined
This is equivalent to the default pipe: {{ name | default:Anonymous }}. Both check specifically for null/undefined — an empty string "" won’t trigger the default. For broader falsy defaults (including empty strings, zero, and false), use the || operator instead: 
{{ name || 'Anonymous' }}  → "Anonymous" if name is any falsy value

​
Unknown Pipes

If a pipe name isn’t recognized, the value passes through unchanged. This prevents errors from typos or forward-compatible pipe names — the output just won’t be formatted.