Learn Java, Angular, SQL with Coding Exercises & Career Tips

Pipes

In Angular, pipes are tiny but powerful tools that help you transform how data appears in your templates without changing the actual data.

Think of pipes as filters:

They take your data and format it for display in a way that looks nicer or makes more sense for users.

For example

Format dates (e.g., show today as “Wednesday, July 17, 2025”)

Change text to uppercase or lowercase

Display numbers as currency

Show part of a list with slice

And much more

Common Built-in Angular Pipes

Angular comes with several built-in pipes you can use right away

lowercase - {{ text | lowercase }}

uppercase - {{ text | uppercase }}

date - {{ dateValue | date:'fullDate' }}

currency - {{ amount | currency:'USD':true:'1.2-2' }}

json - {{ object | json }}

percent - {{ value | percent }}

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

slice - {{ list | slice:1:3 }}

These make it easy to display data exactly how you want.

Example: Using Angular Pipes Step by Step

Step 1: Create a New Angular Project

ng new Angular

Step 2: Create a Component for Pipes Example

ng g c pipes-example

Step 3: Add Pipes in the Template

Edit pipes-example.component.html

<h2>Date Pipe</h2>
<p>Current Date: {{ currentDate | date: 'fullDate' }}</p>

<h2>Number Pipe</h2>
<p>Amount: {{ amount | currency: 'USD':true:'1.2-2' }}</p>

<h2>Uppercase and Lowercase Pipe</h2>
<p>Original Message: {{ message }}</p>
<p>Uppercase: {{ message | uppercase }}</p>
<p>Lowercase: {{ message | lowercase }}</p>

<h2>Percent Pipe</h2>
<p>Percentage Value: {{ percentValue | percent }}</p>

<h2>Slice Pipe</h2>
<p>Some Fruits: {{ fruits | slice:1:3 }}</p>

Step 4: Define Data in the Component

Edit pipes-example.component.ts

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

@Component({
  selector: 'app-pipes-example',
  templateUrl: './pipes-example.component.html',
  styleUrls: ['./pipes-example.component.css']
})
export class PipesExampleComponent {
  currentDate: Date = new Date();
  amount: number = 1234.56789;
  message: string = 'Hello, Angular Pipes!';
  percentValue: number = 0.75;
  fruits: string[] = ['Apple', 'Banana', 'Cherry', 'Date'];
}

Here, we have set sample data to see the pipes in action.

Step 5: Display the Component in App

Edit app.component.html

<h1>Angular Pipes Example</h1>
<app-pipes-example></app-pipes-example>

Step 6: Run the App

ng serve

Go to your browser at http://localhost:4200

You will see

Todays date formatted nicely

Amount as currency

Uppercase & lowercase text

Percentage displayed

Only part of the fruit list shown by slice