Built-in pipes (date, currency, uppercase) in Angular

Introduction

Pipes help you change how data looks in your app without changing the data itself. Built-in pipes like date, currency, and uppercase make it easy to show dates, money, and text in a nice way.

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

You need to display prices with currency symbols like $ or € automatically.

You want to make text all uppercase to highlight it or follow a style.

You want to quickly format data in your template without extra code.

You want consistent formatting across your app for dates, money, or text.

Syntax

Angular

{{ value | pipeName[:parameter] }}

The pipe symbol | is used to apply a pipe to a value in the template.

Some pipes accept optional parameters inside [:parameter] to customize the output.

Examples

Formats the today date variable to a medium date like 'Jan 1, 2024'.

Angular

{{ today | date:'mediumDate' }}

Shows the price as US dollars with a dollar sign and two decimals.

Angular

{{ price | currency:'USD':'symbol':'1.2-2' }}

Converts the name text to all uppercase letters.

Angular

{{ name | uppercase }}

Sample Program

This Angular component shows how to use the built-in pipes date, currency, and uppercase. It displays the original values and their formatted versions side by side.

Angular

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

@Component({
  selector: 'app-pipe-demo',
  template: `
    <h2>Built-in Pipes Demo</h2>
    <p>Original date: {{ today }}</p>
    <p>Formatted date: {{ today | date:'fullDate' }}</p>

    <p>Original price: {{ price }}</p>
    <p>Formatted price: {{ price | currency:'EUR':'symbol':'1.2-2' }}</p>

    <p>Original name: {{ name }}</p>
    <p>Uppercase name: {{ name | uppercase }}</p>
  `
})
export class PipeDemoComponent {
  today = new Date();
  price = 1234.5;
  name = 'angular learner';
}

Important Notes

Use pipes only in templates, not in component TypeScript code.

Currency pipe automatically adds commas and decimals based on locale.

Uppercase pipe works only on strings; other types will be ignored.

Summary

Built-in pipes format data easily in Angular templates.

Date pipe formats dates in many styles.

Currency pipe shows money with symbols and decimals.

Uppercase pipe changes text to all capital letters.