Angular Academy · Lesson

Using Built-in Pipes

Format dates, numbers, and text with pipes.

Using Built-in Pipes is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Pipe?

A pipe transforms data directly in your template for display. You write a value, the pipe character |, then the pipe name.

Pipes are great for formatting dates, numbers, currency, and text without writing extra component logic.

The Pipe Syntax

The basic form is {{ value | pipeName }}. Angular passes the value into the pipe and renders the transformed result.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

The uppercase and lowercase Pipes

uppercase and lowercase change the case of a string. They are simple and commonly used for labels and headings.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

The date Pipe

The date pipe formats a Date object or timestamp into a readable string. By default it uses a medium date format.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Formatting Dates

You can pass a format string to the date pipe, like "shortDate", "fullDate", or a custom pattern such as "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

The currency Pipe

The currency pipe formats a number as money. By default it uses USD, but you can pass a currency code.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

The number and percent Pipes

The number pipe formats numbers with digit options, and percent renders a value as a percentage.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Understanding digitsInfo

The number pipe accepts a digitsInfo string: minIntegerDigits.minFractionDigits-maxFractionDigits. For example "1.2-2" always shows exactly two decimals.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

The json Pipe

The json pipe serializes any object to a JSON string. It is mainly used for debugging templates so you can see the shape of your data.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

The slice Pipe

The slice pipe returns a subset of an array or string, similar to JavaScript slice. It is useful for truncating lists.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Importing Pipes in Standalone Components

In standalone components you must import the pipes you use, for example DatePipe or CurrencyPipe, from @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Quick Check

Test your understanding of built-in pipes.

Recap

You learned the core built-in pipes: uppercase, lowercase, date, currency, number, percent, json, and slice.

Pipes keep formatting in the template, clean and declarative. Next you will chain pipes and pass them arguments.

Frequently asked questions

Is the “Using Built-in Pipes” lesson free?

Yes — the full text of “Using Built-in Pipes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Using Built-in Pipes”?

Format dates, numbers, and text with pipes. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Using Built-in Pipes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy