Chaining and Parameterizing Pipes
Combine pipes and pass arguments.
Chaining and Parameterizing Pipes is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Passing Arguments to Pipes
Pipes can accept arguments after a colon. The form is {{ value | pipeName:arg1:arg2 }}. Each argument is separated by its own colon.
A Single Argument
Many pipes take one argument. For example, the date pipe takes a format string.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Multiple Arguments
The slice pipe takes a start and an end index, each passed with its own colon.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Dynamic Arguments
Arguments can be component properties, not just literals. This lets you change pipe behavior reactively.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;What Is Pipe Chaining?
You can chain pipes so the output of one pipe becomes the input of the next. They run left to right.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Chaining Example
Here a date is formatted then forced to uppercase. The date pipe runs first, then uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->Order Matters
The order of chained pipes changes the result. Applying uppercase before slice versus after produces the same text here, but with transforming pipes order can matter a lot.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Combining Argument and Chaining
You can mix arguments and chaining freely. Each pipe still receives the previous pipe output as its value.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Chaining with currency
Format a number as currency, then trim it. While unusual, this shows pipes are composable building blocks.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Readability Tips
Long pipe chains can hurt readability. If a chain grows complex, consider computing the value in the component or a custom pipe instead.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Whitespace Around Pipes
Spaces around the | and : are optional but recommended for readability. Angular ignores extra whitespace.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Quick Check
Test your understanding of pipe arguments and chaining.
Recap
You learned to pass single and multiple arguments with colons, use dynamic arguments from component properties, and chain pipes so output flows left to right.
Next you will build your own custom pipe.
Frequently asked questions
Is the “Chaining and Parameterizing Pipes” lesson free?
Yes — the full text of “Chaining and Parameterizing Pipes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Chaining and Parameterizing Pipes”?
Combine pipes and pass arguments. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Chaining and Parameterizing Pipes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Using Built-in Pipes
- Chaining and Parameterizing Pipes
- Creating Custom Pipes
- Pure vs Impure Pipes