Angular Pipes

Pipes in Angular are a way to transform data in templates. They allow you to format and transform data dynamically without modifying the underlying component logic. This tutorial explains how to use built-in pipes, create custom pipes, and demonstrates their applications with examples.

What Are Pipes

Pipes are simple functions that accept an input value, transform it, and return a formatted output. There are Two types of pipes; Built-In pipes and custom pipes.

{{ value | pipeName:arg1:arg2 }}

Built-in Pipes

Angular provides several built-in pipes for common transformations like formatting dates, numbers, and strings.

Date Pipe

Formats a date value.

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

@Component({
  selector: 'app-date-pipe-demo',
  standalone: true,
  template: `
    <p>Default Date: {{ today }}</p>
    <p>Formatted Date: {{ today | date:'fullDate' }}</p>
    <p>Time: {{ today | date:'shortTime' }}</p>
  `,
})
export class DatePipeDemoComponent {
  today = new Date();
}

Currency Pipe

Formats numbers as currency.

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

@Component({
  selector: 'app-currency-pipe-demo',
  standalone: true,
  template: `
    <p>Price: {{ price | currency }}</p>
    <p>Custom Currency: {{ price | currency:'EUR':'symbol':'1.2-2' }}</p>
  `,
})
export class CurrencyPipeDemoComponent {
  price = 12345.678;
}

Uppercase and Lowercase Pipes

Transforms strings to uppercase or lowercase.

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

@Component({
  selector: 'app-string-pipe-demo',
  standalone: true,
  template: `
    <p>Original: {{ message }}</p>
    <p>Uppercase: {{ message | uppercase }}</p>
    <p>Lowercase: {{ message | lowercase }}</p>
  `,
})
export class StringPipeDemoComponent {
  message = 'Angular Pipes are Powerful!';
}

Decimal Pipe

Formats numbers to a specific decimal place.

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

@Component({
  selector: 'app-decimal-pipe-demo',
  standalone: true,
  template: `
    <p>Original: {{ number }}</p>
    <p>Formatted: {{ number | number:'1.1-2' }}</p>
  `,
})
export class DecimalPipeDemoComponent {
  number = 12345.6789;
}

Percent Pipe

Formats numbers as percentages.

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

@Component({
  selector: 'app-percent-pipe-demo',
  standalone: true,
  template: `
    <p>Original: {{ ratio }}</p>
    <p>Formatted: {{ ratio | percent:'1.1-2' }}</p>
  `,
})
export class PercentPipeDemoComponent {
  ratio = 0.875;
}

Slice Pipe

Extracts a subset of an array or string.

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

@Component({
  selector: 'app-slice-pipe-demo',
  standalone: true,
  template: `
    <p>Original: {{ items }}</p>
    <p>Sliced: {{ items | slice:1:3 }}</p>
  `,
})
export class SlicePipeDemoComponent {
  items = ['Apple', 'Banana', 'Cherry', 'Date'];
}

JSON Pipe

Formats an object as a JSON string.

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

@Component({
  selector: 'app-json-pipe-demo',
  standalone: true,
  template: `
    <pre>{{ data | json }}</pre>
  `,
})
export class JsonPipeDemoComponent {
  data = {
    name: 'Angular',
    version: 16,
    features: ['Standalone Components', 'RxJS', 'NgModules'],
  };
}

Custom Pipes

You can create your own custom pipes to handle specific transformations.

Creating a Custom Pipe

Create a pipe to transform a name into initials.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'initials',
  standalone: true,
})
export class InitialsPipe implements PipeTransform {
  transform(value: string): string {
    return value
      .split(' ')
      .map(word => word[0])
      .join('')
      .toUpperCase();
  }
}

Using the Pipe:

import { Component } from '@angular/core';
import { InitialsPipe } from './initials.pipe';

@Component({
  selector: 'app-custom-pipe-demo',
  standalone: true,
  imports: [InitialsPipe],
  template: `
    <p>Full Name: {{ name }}</p>
    <p>Initials: {{ name | initials }}</p>
  `,
})
export class CustomPipeDemoComponent {
  name = 'John Doe Smith';
}

Custom Pipe with Parameters

Create a pipe that repeats a string a specified number of times.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'repeat',
  standalone: true,
})
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}

Using the Pipe:

import { Component } from '@angular/core';
import { RepeatPipe } from './repeat.pipe';

@Component({
  selector: 'app-repeat-pipe-demo',
  standalone: true,
  imports: [RepeatPipe],
  template: `
    <p>Original: {{ word }}</p>
    <p>Repeated: {{ word | repeat:3 }}</p>
  `,
})
export class RepeatPipeDemoComponent {
  word = 'Angular ';
}

Chaining Pipes

You can combine multiple pipes.

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

@Component({
  selector: 'app-chaining-pipes-demo',
  standalone: true,
  template: `
    <p>{{ name | uppercase | slice:0:5 }}</p>
  `,
})
export class ChainingPipesDemoComponent {
  name = 'Angular Pipes';
}

Async Pipe

Handles asynchronous operations like Promises or Observables.

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

@Component({
  selector: 'app-async-pipe-demo',
  standalone: true,
  template: `
    <p>Async Data: {{ asyncData | async }}</p>
  `,
})
export class AsyncPipeDemoComponent {
  asyncData = of('Hello, Async Pipe!');
}