Transform Data with Angular Pipes

Most applications follow a simple flow:

1. Fetch data from a server — an API call, or a WebSocket for real-time updates.
2. Transform the data — for example, turn 2020-06-24T09:00:00.000Z (ISO format) into something readable like Jun 24, 2020.
3. Display it in the UI.

Pipes handle step 2 — transforming data before it reaches the user.

What is a pipe?

A pipe is a function that takes an input and returns a transformed output.

Servers often exchange dates as ISO strings like "2020-06-24T09:00:00.000Z" (June 24, 2020, 5:00 PM Singapore time). Users shouldn't see raw ISO strings. We transform them to formats like Jun 24, 2020, 5:00:00 PM.

In Angular you can:

1. Write a function that accepts a date and returns a formatted string.
2. Write a pipe that does the same.

Pipes are easier to reuse across many templates that display dates.

Using pipes

Angular ships common pipes in @angular/common. You can also write custom pipes for project-specific needs.

A pipe accepts input and returns output. Suppose we have a now property:

export class PipeExampleComponent implements OnInit {
  now = '2020-06-24T09:00:00.000Z';
}

Display it with the built-in DatePipe:

<div>{{ now | date }}</div>
// Jun 24, 2020
<div>{{ now | date:'medium'}}</div>
// Jun 24, 2020, 5:00:00 PM

Inside {{ }}, the pipe operator | separates the value from the pipe name:

{{ interpolated_value | pipe_name }}

Pipe parameters

Pass parameters after colons:

{{ interpolated_value | pipe_name:parameter1:parameter2:...:parameterN }}

There's no limit on parameter count.

Chaining pipes

Chain multiple pipes left to right — each pipe receives the previous pipe's output:

{{ interpolated_value | pipe_name_1 | pipe_name_2 |... | pipe_name_n }}

Add uppercase after date:

{{ now | date:'medium' | uppercase}} // JUN 24, 2020, 5:00:00 PM

Built-in pipes

Import CommonModule from @angular/common to use these. Commonly used built-ins:

See the full list in CommonModule.

Writing a custom pipe

A typical CRUD app reuses the same form HTML for add and edit. When editing, the route includes an itemId; when adding, it doesn't. Without a pipe, every template repeats:

{{ itemId ? "Edit" : "Add" }}

A typo (Adđ instead of Add, with Vietnamese input method enabled) motivated a small reusable pipe.

Step 1: Implement PipeTransform

interface PipeTransform {
  transform(value: any, ...args: any[]): any;
}

Example implementation:

export class AppTitlePipe implements PipeTransform {
  transform(resourceId: string): string {
    return resourceId ? 'Edit' : 'Add';
  }
}

Truthy resourceId returns Edit; otherwise Add.

Step 2: Add the @Pipe decorator

@Pipe({
  name: 'appTitle',
})
export class AppTitlePipe implements PipeTransform {
  transform(resourceId: string): string {
    return resourceId ? 'Edit' : 'Add';
  }
}

The name property is required — here, appTitle. Add AppTitlePipe to the module's declarations array where you use it.

<h2 class="ibox-title">{{ userId | appTitle }} User</h2>

Naming conventions (Angular Style Guide):

• Class: UpperCamelCase (e.g. AppTitlePipe)
• Pipe name: camelCase (e.g. appTitle) — no hyphens

Custom pipe parameters

Some pages need Set / Change instead of Add / Edit:

transform(
  resourceId: string,
  addText: string = "Add",
  editText: string = "Edit"
): string {
  return resourceId ? editText : addText;
}

{{ userId | appTitle:"Set":"Change"}}

• First transform argument: the piped value (userId)
• Additional template parameters map to arguments 2, 3, … in order

Change detection and pipes

Primitive types

With string resourceId, when the value changes, the pipe re-runs and the UI updates:

export class PipeExampleComponent implements OnInit {
  userIdChangeAfterFiveSeconds = '14324';
  time$: Observable<number> = timer(0, 1000).pipe(
    map((val) => 5 - (val + 1)),
    startWith(5),
    finalize(() => {
      this.userIdChangeAfterFiveSeconds = '';
    }),
    takeWhile((val) => val >= 0)
  );
}

<p>
  Set userId to empty string after {{ timer | async }} seconds, notice the text
  "Edit" will be set to "Add"
</p>
<pre ngNonBindable>{{ userIdChangeAfterFiveSeconds | appTitle}}</pre>
<div>Form title: {{ userIdChangeAfterFiveSeconds | appTitle}} User</div>

Primitives (string, boolean, number) trigger pipe updates straightforwardly.

Reference types

Given a users array:

users: User[] = [
  { name: "Tiep Phan", age: 30 },
  { name: "Trung Vo", age: 28 },
  { name: "Chau Tran", age: 29 },
  { name: "Tuan Anh", age: 16 }
];

An isAdult pipe filters users over 18:

@Pipe({
  name: 'isAdult',
})
export class IsAdultPipe implements PipeTransform {
  transform(arr: User[]): User[] {
    return arr.filter((x) => x.age > 18);
  }
}

<div class="row">
  <div class="col-xs-6">
    <h4>Full user list</h4>
    <div *ngFor="let user of users">{{ user.name }}</div>
  </div>
  <div class="col-xs-6">
    <div class="ml-4">
      <h4>Adult user list</h4>
      <div *ngFor="let user of users | isAdult">{{ user.name }}</div>
    </div>
  </div>
</div>

Tuan Anh (age 16) is correctly excluded from the adult list.

Add a user with a form — pushing into the array doesn't update the piped list:

addUser() {
  this.users.push(this.newUser);
  this.newUser = new User()
}

By default, pipes are pure — Angular runs them only on a pure change to the input: a new primitive value, or a new object reference for objects/arrays/functions.

Mutating an array in place doesn't change its reference, so the pipe doesn't re-execute.

Reference checks are much faster than deep equality checks, so prefer pure pipes when possible.

Two fixes:

1. Update the variable reference

addUserByUpdateReference() {
  this.users = [...this.users, this.newUser];
  this.newUser = new User();
}

2. Set pure: false (impure pipe)

@Pipe({
  name: 'isAdult',
  pure: false
})

Summary

We've covered what pipes are, built-in and custom pipes, parameters and chaining, and the difference between pure and impure pipes in change detection.

Further reading:

• https://angular.io/guide/pipes
• https://angular.io/api/common/CommonModule#pipes
• Angular pipe singular/plural

Youtube Video

Code sample

https://stackblitz.com/edit/angular-100-days-of-code-day-18-pipes