Why pipes are needed in Angular

Introduction

Pipes help change how data looks in your app without changing the data itself. They make it easy to show data in a way people understand.

You want to show a date in a friendly format like 'Jan 1, 2024' instead of a long code.

You need to turn a number into currency with a dollar sign and two decimals.

You want to make text uppercase or lowercase before showing it.

You want to shorten a long text to just a few words for a preview.

You want to show true/false as 'Yes' or 'No' in the user interface.

Syntax

Angular

{{ value | pipeName[:parameter] }}

Use double curly braces {{ }} to show data in templates.

The pipe symbol | sends the data through the pipe to change its display.

Examples

Shows a date like 'January 1, 2024' instead of a raw date string.

Angular

{{ birthday | date:'longDate' }}

Formats a number as US dollars with a $ sign.

Angular

{{ price | currency:'USD' }}

Changes the text to all uppercase letters.

Angular

{{ name | uppercase }}

Shows only the first 20 characters of a long text.

Angular

{{ description | slice:0:20 }}

Sample Program

This component shows how pipes change data display without changing the data itself. You see the original and the transformed versions side by side.

Angular

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

@Component({
  selector: 'app-pipe-demo',
  template: `
    <h2>Pipe Examples</h2>
    <p>Original date: {{ birthday }}</p>
    <p>Formatted date: {{ birthday | date:'longDate' }}</p>
    <p>Price: {{ price | currency:'USD' }}</p>
    <p>Name uppercase: {{ name | uppercase }}</p>
    <p>Short description: {{ description | slice:0:15 }}...</p>
  `
})
export class PipeDemoComponent {
  birthday = new Date(1990, 0, 1);
  price = 1234.5;
  name = 'angular learner';
  description = 'This is a long description that needs to be shortened.';
}

Important Notes

Pipes do not change the original data, only how it looks.

You can chain multiple pipes like {{ value | pipe1 | pipe2 }}.

Angular has many built-in pipes, and you can create your own.

Summary

Pipes make data easier to read and understand.

They help format dates, numbers, text, and more.

Using pipes keeps your templates clean and simple.