? Built-in Pipes

? Quick Overview

Angular provides several built-in pipes to transform data directly in the template. You can format dates, currencies, numbers, and change text case without touching the component logic, making your templates cleaner and easier to read.

A pipe takes an input value, transforms it, and returns the formatted result: value | pipeName:arg1:arg2

? Key Concepts

• Pipes are simple functions used in Angular templates to transform data.
• Syntax: {{ value | pipeName:arg1:arg2 }}
• You can chain multiple pipes, for example: {{ dateValue | date:'short' | uppercase }}.
• Built-in pipes handle common tasks like date, currency, uppercase, lowercase, json, and slice.
• Pipes only affect how data is displayed; they do not change the original value in the component.

? Syntax & Usage

Basic syntax inside a template interpolation:

{{ value | pipeName:arg1:arg2 }}

• date: formats Date objects into human-readable strings.
• currency: formats a number as localized currency.
• uppercase / lowercase: convert text to upper or lower case.
• json: pretty-prints an object as JSON.
• slice: returns a sub-string or sub-array from the original value.

? Code Example – Common Built-in Pipes

<!-- app.component.html: Display values using built-in pipes -->
<p>Current Date: {{ today | date:'fullDate' }}</p>
<p>Price: {{ amount | currency:'USD' }}</p>
<p>Uppercase: {{ name | uppercase }}</p>
<p>Lowercase: {{ name | lowercase }}</p>
<p>JSON: {{ user | json }}</p>
<p>Slice: {{ message | slice:0:5 }}</p>

// app.component.ts: Define values used by the template
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  today = new Date();            // current date
  amount = 2499.99;              // product price
  name = 'angular pipes';        // sample text
  message = 'Hello Pipes!';      // message to slice
  user = {                       // user object for json pipe
    id: 1,
    name: 'John Doe',
    role: 'Admin'
  };
}

? Live Output / Explanation