Pipe chaining in Angular

Introduction

Pipes help change how data looks in your app. Pipe chaining lets you use many pipes one after another to change data step by step.

You want to show a date in a short format and then make it uppercase.

You want to convert a text to lowercase and then show only the first 10 characters.

You want to format a number as currency and then make it lowercase.

You want to convert text to lowercase and then convert to title case.

Syntax

Angular

{{ value | pipe1 | pipe2 | pipe3 }}

Each pipe changes the data and passes it to the next pipe.

Use the | symbol to chain pipes in your template.

Examples

First formats the date, then makes it uppercase.

Angular

{{ birthday | date:'shortDate' | uppercase }}

Converts to lowercase, then shows only first 10 characters.

Angular

{{ userName | lowercase | slice:0:10 }}

Formats price as USD currency, then makes it lowercase.

Angular

{{ price | currency:'USD' | lowercase }}

Converts message to lowercase, then converts to title case.

Angular

{{ message | lowercase | titlecase }}

Sample Program

This Angular component shows how to chain pipes in the template. It formats a date fully and then makes it uppercase. It also converts a username to lowercase and then shows only the first 5 characters.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-pipe-chaining',
  template: `
    <h2>Pipe Chaining Example</h2>
    <p>Original date: {{ birthday }}</p>
    <p>Formatted and uppercase date: {{ birthday | date:'fullDate' | uppercase }}</p>

    <p>Original text: '{{ userName }}'</p>
    <p>Lowercased and sliced text: '{{ userName | lowercase | slice:0:5 }}'</p>
  `
})
export class PipeChainingComponent {
  birthday = new Date(1990, 4, 15); // May 15, 1990
  userName = 'AngularLearner';
}

Important Notes

Pipe chaining runs pipes left to right, passing the result of one pipe to the next.

Time complexity depends on each pipe used; simple pipes run fast.

Common mistake: forgetting that each pipe receives the output of the previous one, so order matters.

Use pipe chaining when you want to apply multiple simple transformations in a clear, readable way.

Summary

Pipes change how data looks in Angular templates.

Pipe chaining lets you apply many pipes one after another.

Order of pipes matters because each pipe uses the previous pipe's output.