What is Pipe in Angular | How to create custom pipe

What is Pipe in Angular | How to create custom pipe

Pipes are functions that take input values and return transformed output values inside Angular templates. You apply them using the | (pipe) operator in interpolation ({{ }}) or bindings.

<p>{{ today | date:'fullDate' }}</p>

<p>{{ name | uppercase }}</p>

In-built Pipe Name

Pipe	Description

DatePipe

Formats dates

UpperCasePipe / LowerCasePipe

Transforms text case

CurrencyPipe

Formats numbers as currency

DecimalPipe

Formats numbers with decimal precision

PercentPipe

Formats percentages

TitleCasePipe

Capitalizes words

SlicePipe

Slices arrays or strings

AsyncPipe

Unwraps async values from Observable/Promise

Pipe Chaining:

To connect multiple files with each other is called Pipe Chaining.

{{ value | decimal:'1.0-2' | percent }}

Create Custom Pipe in Angular:

ng generate pipe reverse

ng g p reverse

it create reverse.pipe.ts

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

@Pipe({

  name: 'reverse',

  standalone: true   // Angular 15+ recommended approach

})

export class ReversePipe implements PipeTransform {

  transform(value: string): string {

    if (!value) return '';

    return value.split('').reverse().join('');

  }

}

Connect pipe with components:

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

import { ReversePipe } from './reverse.pipe';

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [ReversePipe],

  templateUrl: './app.component.html'

})

export class AppComponent {

  name = "Angular21";

}

in .html file

<h2>Original: {{ name }}</h2>

<h2>Reversed: {{ name | reverse }}</h2>