Going Deeper›Extra· 30 min read

Writing Your Own Pipes

When the built-in pipes are not enough, you can build a custom pipe to format any value exactly the way you want.

What you will learn

Generate a custom pipe with the CLI
Implement the transform method
Use your pipe in a template like any built-in one

When built-in pipes run out

You already met built-in pipes like uppercase, date and currency. But sometimes you need a transformation Angular does not ship — “shorten this text to 20 characters”, “turn 1500 into 1.5k”, “mask a phone number”. For those you write a custom pipe: a small reusable class that transforms a value for display.

Generate the pipe

The CLI creates a pipe class

ng generate pipe truncate
# short form: ng g p truncate

Note: Output: CREATE src/app/truncate.pipe.ts You get a class marked with the @Pipe decorator and an empty transform method waiting for your logic.

Fill in the transform method

A pipe is a class with one method, transform. Its first argument is the value being piped; any extra arguments are the options you pass after a colon in the template. Whatever transform returns is what the user sees.

A pipe that shortens long text

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    if (value.length <= limit) {
      return value;
    }
    return value.slice(0, limit) + '…';
  }
}

Note: Output: (No visible output by itself — this defines the pipe.) The name: 'truncate' is how you call it in templates. transform returns the text untouched if it is short, or the first limit characters plus an ellipsis if it is long. limit = 20 is the default when you do not pass one.

Use it like any pipe

Import the pipe into your component, then apply it with | exactly like a built-in pipe. Pass the limit after a colon.

Apply the custom pipe with an argument

<p>{{ 'Angular makes building large apps organised' | truncate:15 }}</p>

Note: Output: Angular makes b… The pipe kept the first 15 characters and added “…”. Change 15 to 30 and more text shows. Your underlying string is never changed — only the display is.

Tip: A pipe should be pure — given the same input it returns the same output and does nothing else (no saving, no fetching). That keeps it fast, because Angular can skip re-running it when nothing changed.

Q. Which method must every custom pipe implement?

Answer: A pipe class implements transform(value, ...args). It receives the piped value plus any arguments and returns the formatted result for display.

✍️ Practice

Build a capitalize pipe that uppercases only the first letter of a string.
Build a kFormat pipe that shows 1500 as “1.5k”.

🏠 Homework

Write a timeAgo pipe that turns a Date into text like “3 days ago”, with a fallback for today.